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程序设计有所帮助。
相关文章
这篇文章主要介绍了JS实现的最简Table选项卡效果,涉及简单的JavaScript响应鼠标事件切换样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
返回顶部是经常会见到的效果，代码比较简单，使用2个对象和一个主函数。职责明确方便复用2012-01-01
最近接到任务,需实现【网页】放大镜的效果,百度搜索 【js 放大镜】关键字,千篇一律的都是一些仿淘宝/京东等电商网站中查看规格大图的效果实现,根本无法满足我的需求,于是自己花了点时间调研实现,在这里分享给大家,感兴趣的朋友可以参考下2023-12-12
cnblogs是比较有名的技术博客基地，很多技术达人都在里面发布技术文章， 不过由于代码不利于复制，因为页面里面有pre标签等问题2011-12-12
这篇文章主要介绍了JS中判断null的方法,结合实例形式对比分析了常见的JS错误判断方法及正确判断操作相关技巧,需要的朋友可以参考下2016-11-11
这篇文章主要为大家详细介绍了JavaScript设计模式之例模式的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了JS数组扁平化(flat)方法总结详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了uni-file-picker文件选择上传,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
这篇文章主要介绍了Bootstrap3 模态框的使用实例,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
本篇文章主要介绍了webpack+vue2构建vue项目骨架的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
最新评论