() {
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级绑定。