js之弹出子窗口

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

一、简单实现效果

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

二、源码

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

父窗口源码

在此简单解释

/*

* window.open( sURL , sName , sFeatures)

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

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

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

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

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

*/

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

子窗口

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

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();