js之弹出子窗口

最新推荐文章于 2024-08-06 10:37:21 发布
最新推荐文章于 2024-08-06 10:37:21 发布
阅读量9.6k 收藏 14
点赞数 1
分类专栏： js基础 文章标签： 子窗口弹出 父子窗口传值
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/S_T_F666/article/details/82216413
版权

关于弹出框，之前在项目中，一直想添加，奈何好多都忘了，今天重新学了一把，废话少说，直接上效果与源码分析

一、简单实现效果

建议大家不再在学习window.showModalDialog了，这个方法在2014年已经被谷歌等主流浏览器取消函数了

二、源码

首先我们有父窗口与子窗口，并且子窗口能将数据传送到父窗口中

父窗口源码

<script language="JavaScript">

    <script language="JavaScript">

    //弹出框

    function openWin() {

        window.open("jump.html", "_blank",'height=200,width=400,status=yes,top=200,left=400,toolbar=no,menubar=no,location=no')

    }

    function setValue(sid,sname) {

        document.getElementById("sid").value=sid;

        document.getElementById("sname").value=sname;

    }

</script>

<body>

    <form name="form1" action="test.html" method="post">

        学号: <input type="text" name="sid" value="" id="sid"><br>

        姓名:<input type="text" name="sname" value="" id="sname">

        <input type="button" name="ok" value="请选择学生" onclick="openWin();" />

    </form>

</body>

在此简单解释

 

        /*

          *  window.open( sURL , sName , sFeatures)

          *    * sURL:指定要被加载的HTML文档的URL地址。假如无指定值，则 about:blank 的新窗口会被显示

          *    * sName:指定打开的窗口的名字

          *       * _blank: 在新窗口中打开 sUrl 

          *       * _self:sUrl 在当前窗口中打开，覆盖当前文档

          *       * sFeatures:指定窗口装饰样式。使用下面的值。多个之间用逗号隔开.

                              */

其余的详细解释以及属性设置可以到w3c、菜鸟教程等网站去查询，这里不多做解释

子窗口

<script language="JavaScript">

    function viewData(sid, sname) {

       var student = window.opener;

       //方法一

//     student.document.getElementById("sid").value=sid;

//     student.document.getElementById("sname").value=sname;

       //方法二

       student.setValue(sid, sname);

       window.close();

    }

</script>

<body>

    <table border="1">

       <tr>

           <td>操作</td>

           <td>学号</td>

           <td>姓名</td>

       </tr>

 

       <tr>

           <td><input type="button" value="选择" id="ss" onclick="viewData('161530254','石腾飞')"></td>

           <td>161530254</td>

           <td>石腾飞</td>

       </tr>

       <tr>

           <td><input type="button" value="选择" onclick="viewData('161530000','超级用户')"></td>

           <td>161530000</td>

           <td>超级用户</td>

       </tr>

    </table>

</body>

在这里着重解释一下，关于获取父窗口的所有内容和对象，在子窗口使用；

var student = window.opener;

Window.opener：网上解释是：可返回对创建该窗口的 Window 对象的引用，即简单的来说就是Window.opener返回值是就是代表父窗口可以用如下方式给父窗口的id为sid的元素赋值

student.document.getElementById("sid").value=sid;

当然还有方法二：方法二比较好看，感觉牛逼，其实都一样

在父窗口里封装一个函数

function setValue(sid,sname) {

        document.getElementById("sid").value=sid;

        document.getElementById("sname").value=sname;

        }

在子窗口中调用

student.setValue(sid, sname);

千万要记得无论什么方法都要记得使用完毕，关闭子窗口

window.close();

 

 

S_T_F666
关注
专栏目录
js 弹出页面+弹出窗口
01-19
提交成功后弹出页面+弹出窗口 弹出页面+弹出窗口 弹出页面+弹出窗口
JavaScript实现弹出子窗口并传值给父窗口
10-25
在JavaScript中，弹出子窗口并传递值给父窗口是一个常见的需求，特别是在构建交互式的Web应用时。这个过程可以通过使用`window.open()`或`window.showModalDialog()`函数来实现。让我们详细了解一下这两个方法以及...
总结：子窗口创建及父窗口与子窗口之间通信
Squirrel的专栏
08-15 7396
1、Javascript弹出子窗口可以通过多种方式实现，下面介绍几种方法(1) 通过window对象的open()方法，open()方法将会产生一个新的window窗口对象    其用法为： window.open(URL,windowName,parameters);  URL: 描述要打开的窗口的URL地址，如何为空则不打开任何网页；  windowName:描述被打开的窗口的
【JQuery】jquery弹出页面窗口
最新发布
a1k2l45k的博客
08-06 273
在网页开发中，经常会遇到需要弹出一个页面窗口的场景，比如用户登录、提示、确认等等。而使用jQuery库可以简化这个过程，使得弹窗的实现更加方便快捷。本文将介绍使用jQuery实现弹出页面窗口的步骤，并提供相应的代码示例和解释。
js 弹出子窗口
勿忘初心的博客
06-14 2917
Javascript弹出子窗口  可以通过多种方式实现，下面介绍几种方法  (1) 通过window对象的open()方法，open()方法将会产生一个新的window窗口对象  其用法为：  window.open(URL,windowName,parameters);  URL: 描述要打开的窗口的URL地址，如何为空则不打开任何网页；  windowName:
javascript 弹出子窗口
代码的艺术
09-04 2094
javascript弹出子窗口，并实现父子窗口的信息交互。 javascript弹出子窗口的方式有2中: 1.window.showModalDialog("URL",window,"toolbar=no;menubar=no;location=no;status=no;dialogWidth=650px;dialogHeight=400px;resizable=yes;center:yes;
JS弹出子窗口
weixin_30832983的博客
05-01 1218
目的 在一个主窗口中,点击一个链接, 弹出一个子窗口 , 父窗口保留在子窗口中点击关闭, 关闭子窗口. 子窗口的位置位于屏幕的中间 实现 main.html <!DOCTYPE html> <html> <head><meta charset="utf-8"/></head> <body&gt...
Javascript弹出子窗口
LZH的专栏
04-18 8262
<br />1、Javascript弹出子窗口<br />可以通过多种方式实现，下面介绍几种方法<br />(1) 通过window对象的open()方法，open()方法将会产生一个新的window窗口对象 //IE7里不支持<br /><br /> 其用法为：<br /> window.open(URL,windowName,parameters);<br />URL: 描述要打开的窗口的URL地址，如何为空则不打开任何网页；<br />windowName:描述被打开的窗口的民称，可以使用'_
用javascript父窗口控制只弹出一个子窗口
10-30
在JavaScript中，父窗口控制只弹出一个子窗口的需求通常用于避免重复弹窗，提升用户体验。下面我们将详细讨论如何实现这一功能，以及涉及到的相关知识点。 首先，基本的弹出新窗口操作可以通过`window.open()`函数...
javascript弹出窗口中增加确定取消按钮
10-22
在Web开发中，使用JavaScript弹出窗口来获取用户的确认或者提供额外的操作选项是一种常见的交互方式。本文主要介绍如何在ECShop这样的电子商务平台上，通过JavaScript代码实现在弹出窗口中增加“确定”和“取消”...
在父页面弹出子页面JS
06-06
父页面弹出子页面
js总结：子窗口创建及父窗口与子窗口之间通信　
巴萨，足球的艺术
06-24 2785
1、Javascript弹出子窗口 可以通过多种方式实现，下面介绍几种方法 (1) 通过window对象的open()方法，open()方法将会产生一个新的window窗口对象 其用法为： window.open(URL,windowName,parameters); URL: 描述要打开的窗口的URL地址，如何为空则不打开任何网页； windowName:描述被打开的窗口
弹出子窗口
FightingITPanda的博客
06-05 457
showModalDialog:子窗口被打开后始终保持输入焦点，直到被关闭，否则不能切换到父窗口。 showModelessDialog:子窗口被打开后不影响对父窗口的操作。 样式属性： 1.dialogHeight:对话框的高度 >=100px 2.dialogWidth:对话框的宽度 3.dialogLeft: 离屏幕左边的距离 4.dialogTop:离屏幕上边的距离 5.c
JavaScript 打开子窗口
靳的博客
02-25 1146
原文地址：http://blog.163.com/lyq_163_2009/blog/static/134082696201111131055283/ 打开子窗口（非模式窗口）：             http-equiv="Content-Type" content="text/html; charset=GBK" />         打开子窗口                
JavaScript 自定义弹出窗口
哈
09-27 2714
"按页面条件导出数据还是导出所有的数据"// 获取对话框元素并设置标题和消息。'你确定要删除这条记录吗？// 获取对话框元素并隐藏。
js的打开子窗口 shwoModalDialog
wonder的地下室
12-31 5665
http://www.mwjx.com/bbs/html/20000/18833.html 基本介绍： showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.showModalDialog()方法用来创建一个显示HTML内容的模态
JS 打开、关闭子窗口
侯文轩 程序员专栏
02-22 3818
JS 打开、关闭子窗口 function openChildWin(){ //方法体 } function closeChildWin(){ //方法体 }
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值