300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 嵌入式iframe子页面与父页面js通信办法【javascript】

嵌入式iframe子页面与父页面js通信办法【javascript】

时间:2023-09-13 15:27:58

相关推荐

嵌入式iframe子页面与父页面js通信办法【javascript】

web前端|js教程

嵌入式,iframe,子页面,父页面,js,通信,方法

web前端-js教程

bootstrap 网站源码下载,ubuntu 设置显示行号,tomcat7配置jmx,爬虫届玩,怎么理解php递归函数,英山seolzw

iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接,有明显不同的通信方式,同域下的数据交换和DOM元素互访就简单的多了,而跨域的则需要一些巧妙的方式来实现通信。

shop源码下载,ubuntu安装抓包,如何改tomcat的版本,爬虫录制视频,支持php java 的容器,略懂seolzw

A、同域下父子页面的通信

vb反编译源码,ubuntu 查看本机名,tomcat日志异步写,分析爬虫抓取,php程序开发师,荆门二手车seo推广公司排名lzw

父页面 parent.html:

function say() {

alert("parent.html------>Im at parent.html");

}

function callChild()

{

//document.frames["myFrame"].window.say();//只适用于ie浏览器

myFrame.window.say();

myFrame.window.document.getElementById("button").value="我变了";

}

子页面 child.html:

function say()

{

alert("child.html--->Im at child.html");

}

function callParent() {

parent.say();

parent.window.document.getElementsByName("myFrame")[0].style.height="100px";

}

方法调用

如上面示例所示父页面调用子页面的方法可通过:FrameName.window.childMethod();(这种方式兼容各种浏览器)

子页面调用父页面的方法:parent.window.parentMethod();

DOM元素访问

根据FrameName.window得到了子窗口对象之后,再访问其中的DOM元素就跟访问同一页面中的DOM元素没区别了都可以通过

document.getElementById(),document.getElementsByName()[index]

如:

parent.window.document.getElementsByName("myFrame")[0];

myFrame.window.document.getElementById("button")

其中的window都是可以省略的。

注意事项

要确保在Iframe加载完成后再进行操作,如果Iframe还未加载完成就开始调用里面的方法或变量,无疑会产生错误。判断Iframe是否加载完毕有两种方法:

1.在Iframe上用onload事件;

2.用document.readyState=="complete"来判断

B、跨域父子页面通信方法

如果iframe所链接的是外部页面,因为安全机制则不能使用同域名下的通信方式了。

父页面向子页面传递数据

实现的技巧就是利用 location 对象的 hash 值,通过它传递通信数据,我们只需要在父页面设置 iframe的 src 后面多加个#data 字符串(data就是你要传递的数据),然后在 子页面 中通过某种方式能即时的获取到这儿 data 就可以了,其实常用的一种方式就是:

1. 在 子页面 中通过 setInterval 方法设置定时器, 监听 location.href 的变化即可获得上面的 data 信息

2. 然后 子页面 就能根据这个 data 信息进行相应的逻辑处理。

子页面向父页面传递数据

实现的技巧就是利用一个代理 Iframe C,它嵌入到 子页面中,并且和父页面必须保持是同域,然后我们通过它充分利用上面第一种通信方式的实现原理就能把 子页面的数据传递给 iframeC,接下来的问题就是怎么让iframeC把数据传递给主页面A ,因为,iframeC 和主页面是同域的,所以它们之间传递数据就变得简单多了,属于同域名下的通信问题了,如前面所讨论的,在这里的可以使用一个经常使用的属性 window.top (也可以使用window.parent.parent),它返回对载入浏览器得最顶层 window 对象的引用,这样我们就能直接条用父页面中方法啦。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。