javascript父子页面通讯实例详解
更新时间：2015年07月17日 15:22:34 作者：优雅先生
这篇文章主要介绍了javascript父子页面通讯的实现方法,实例分析了javascript针对父子页面通讯的原理与相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
这篇文章主要为大家介绍了JavaScript 隐式类型转换规则详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪2023-05-05
前几天在做数据分析时,我尝试获取某网站上输入搜索词后的联想词,输入搜索词后会弹出一个显示联想词的框,有趣的是,输入框失去焦点后,联想词弹框就自动消失了,这种情况下该怎么办呢,所以本文给大家介绍了如何使用JavaScript获取自动消失的联想词,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了javascript制作照片墙及制作过程中出现的问题，感兴趣的朋友可以参考一下2016-04-04
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。下面这篇文章主要给大家介绍了利用three.js如何绘制地球、飞机与轨迹的效果，文中给出了详细的示例代码，需要的朋友们可以参考借鉴，下面来一起看看吧。2017-02-02
本文主要基于向HTML页面引入JavaScript的几种方式，分析HTML中JavaScript脚本的执行顺序问题，通过本文给大家分享浏览器执行JavaScript脚本加载与代码执行顺序，对浏览器执行javascript及执行顺序相关知识感兴趣的朋友一起学习吧2016-01-01
这篇文章主要介绍了JS 实现导航菜单中的二级下拉菜单的几种方式的相关资料,这里提供了三种方式，和实例代码，需要的朋友可以参考下2016-10-10
下面小编就为大家带来一篇在html中引入外部js文件,并调用带参函数的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章介绍了JS自动适应的图片弹窗实例代码，有需要的朋友可以参考一下2013-06-06
这篇文章主要介绍了Bootstrap4 gulp 配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了微信小程序和百度的语音识别接口详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
最新评论