学习window.open()及问题分析
以前对window.open()理解的不透彻，最近因为产品需要，重新学习了一下，以下为一些收获和问题总结：
调用方式：window.open(url , winName , style);
url：弹出窗口的路径【必选】
winName：弹出窗口的名字【可选】
style：弹出窗口的样式（类型为字符串，结构如“attr1=xxx1,attr2=xxx2”，不能有空格，关于这个参数的可选值网上很多，在此不做赘述。需要注意的是其中很多属性在浏览器中表现差异较大，建议对窗口样式要求不高时选择window.open）【可选】
通过代码创建一个简单的窗口：
window.open("Content.html",'windowopen',"width=400px,height=400,left=500,top=100")
可以看到同样的样式在不同浏览器中的表现是不同的，以下是测试中考虑到的一些条件及实际测试结果（T为支持，空为不支持）：
关于浏览器阻止弹出新窗口
不同浏览器对js控制自动弹出的window会进行拦截，但如果是用户主动触发标签发生的事件则不会阻止，所以如果是正当作用的弹框，大可以放心的通过用户行为触发事件。
关于弹窗数量
function openWin() {
return window.open("Content.html","windowopen","width=400px,height=400,left=500,top=100"); } $(".btn1").click(function() { subPage = openWin(); });
以上代码表示，点击按钮btn1，弹出一个名为windowopen的窗口
1）同名的窗口会在同一个弹窗中弹出，所以以上代码中的btn1不管点击多少次（已弹出的窗口不关闭），都不会再弹出第二个弹窗，只是刷新弹窗中的页面
2）如果想每次点击都弹出新的弹窗（已弹出的窗口不关闭），可以在winName上加一个随机数，保证每次弹出的弹窗名不同（需要注意的是winName不可过长，否则IE8/9会报错）
3）也可以实现点击一次，弹出多个弹窗，前提是几个弹窗的winName不同，否则只会弹出一个弹窗，代码如下：
function openWin() { window.open("Content.html","windowopen1","width=400px,height=400,left=500,top=100"); window.open("Content.html","windowopen2","width=400px,height=400,left=500,top=100"); } $(".btn1").click(function() { openWin(); });
关于父子页面间访问
子页面(Content.html)->父页面(OpenWin.html)：
子父页面分别属于两个窗体，【子页面】中可以通过window或self访问自身元素，可以通过window.opener访问打开子窗口的父窗口中的元素。
在子窗体控制台打印window.opener，返回的是父窗口的window对象
父页面(OpenWin.html)->子页面(Content.html)：
【父页面】中可以通过window访问自身元素，可以通过window.open()方法的返回值，访问子页面中的元素（需要注意的是，要想获取子窗口的window对象，子窗口必须处于弹出状态，否则获取的返回值为undefined），代码如下：
var subPage = null;//子窗口返回值
function openWin() { return window.open("Content.html", 'windowopen', "width=400px,height=400,left=500,top=100"); }
//打开子窗口
$(".btn1").click(function() { subPage = openWin();
});
//获取子窗口 $(".btn1_get").click(function() { if (subPage) { console.log(subPage)； }
});
可以看到控制台输出的结果就是子窗口的window对象。
=========在此插播测试父子页面间访问是出现的一个问题============
条件：父子页面引入jQuery文件，并在父页面的某个标签上通过$jq.data("key1","val1")存入数据，希望从子页面访问该标签上的数据
子页面代码：
但实际输出结果为空对象，为毛？
受高人指点过后，发现自己犯了一个错误，jQuery被引入后，会将自己的命名空间挂在window对象中，jQuery提供的所有方法都在其命名空间下，而$jq.data("key1","val1")的数据实际并不是存储在调用它的$jq上，而是存储在window.jQuery.cache对象中：
而父页面和子页面分别从属于其各自的两个window对象，也就是说，我在父页面中使用$jq.data("key1","val1")存储的数据，只存在于父窗体的jQuery.cache中，而如下代码实际上使用的是当前window（子窗体）中的jQuery，而子窗体中的jQuery中并没有存储父窗体中的信息。
正确的写法为：
============完毕============
关于beforeunload事件
beforeunload：可以用在BODY, FRAMESET, window元素上，顾名思义，表示在页面卸载前执行，具体执行时机如下：
·关闭浏览器窗口
·通过地址栏或收藏夹前往其他页面的时候
·点击返回，前进，刷新，主页其中一个的时候
·点击 一个前往其他页面的url连接的时候
·调用以下任意一个事件的时候：click，document write，document
open，document close，window close ，window navigate ，window
NavigateAndFind,location replace,location reload,form submit.
·当用window open打开一个页面，并把本页的window的名字传给要打开的页面的时候。
·重新赋予location.href的值的时候。
·通过input type=”submit”按钮提交一个具有指定action的表单的时候。
可以通过DOM0级事件绑定为该事件绑定一个函数：
window.onbeforeunload = function (e) { return "呵呵不让你关"; }
该事件可以返回一个字符串，作为卸载页面前提示用户确认卸载的提示语（该返回值在火狐无效，被直接无视）
后面又测试了使用DOM2级事件绑定为该事件绑定一个函数：
实际测试发现，只有IE和safari支持该绑定方式，此外，为window绑定多个beforeunload事件，仅第一次绑定的函数被执行了，故建议在对beforeunload事件进行绑定时，使用DOM0级绑定。
