这篇文章主要介绍了 javascript 父子页面通讯的实现方法, 实例分析了 javascript 针对父子页面通讯的原理与相关实现技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 javascript 父子页面通讯的实现方法。分享给大家供大家参考。具体分析如下:
如果一个 domain 为 www.abc.com 的页面内部包含一个 name 属性值为 childFrame 的 iframe,并且这个 iframe 的 domain 为 static.abc.com。那么可以通过设置父页面的 domain 为 abc.com,子页面的 domain 也为 abc.com,然后实现父子页面通讯(我这里有点混淆父子页面和跨域的概念。
不采用上面的方法也是可以实现父子页面相互访问的。
方法是:在父页面用 window.frames[0] 或者 window.frames["childFrame"],返回的是一个 Window 对象,然后就可以通过:
- var childWindow = window.frames[0];
- // 或者 window.frames["childFrame"] 或者直接childFrame 或者childFrame.window
- var childDoc = childWindow.contentDocument || childWindow.document;
利用 childWindow 可以访问执行子页面定义的函数,利用 childDoc 可以访问子页面的 DOM 节点。
而子页面要访问父页面,可以通过 parent(Window 对象),如果一个页面已经是顶级页面那么 parent==self 将返回 true:
- if(parent != self) {
- // 当前页面有父页面
- // 调用父页面的函数
- parent.parentFunc();
- var parentDoc = parent.contentDocument || parent.document;
- // 访问父页面的DOM节点
- }
www.abc.com 父页面:
- document.domain = 'abc.com';
- var ifr = document.createElement('iframe');
- ifr.src = 'http://static.abc.com/';
- ifr.style.display = 'none';
- document.body.appendChild(ifr);
- ifr.onload = function(){
- var doc = ifr.contentDocument || ifr.contentWindow.document;
- // 在这里操纵子页面
- alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
- };
www.static.abc.com 子页面:
- document.domain = 'abc.com';
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: