JS_ifream通信

准备工作;

1,建三个HTML页面,命名ifream.html, ifream_temp1.html, ifream_temp2.html, 在ifream.html中把另外两个调用出来;

如:

/*
* ifream.html中body结构
*/
<
div class="ifream"> <iframe src="ifream_temp1.html" width="500" height="50" frameborder="0" id="ifream_temp1"></iframe> </div> <div class="ifream"> <iframe src="ifream_temp2.html" width="500" height="50" frameborder="0" id="ifream_temp2"></iframe> </div>
/*
* ifream_temp1.html中body的机构
*/
<
input type="button" value="add" id="add" />
/*
* ifream_temp2.html中body的结构
*/
<
input type="text" id="ifream" />

 我们的目标是在temo1中点击add在teml2中显示我们所要显示的内容.

/*
* 在ifream_temp1.html中添加的javascript代码;
* ifream.contentDocument 在IE6,7下返回的是indefined;
* ifream.contentWindow 是个非标准但是全部兼容的属性,返回ifream的window对象; 所以还有个写法.
*/
<
script type="text/javascript"> function ifreamContent(ifream){
    if(!!ifream.contentDocument) return ifream.contentDocument;
    return ifream.Document;
} add.onclick
= function(){ var ifream2 = window.top.document.getElementById('ifream_temp2'); var add = document.getElementById("add"); var dom2 = ifreamContent(ifream2);  //   var dom2 = ifream2.contentWindow.document; dom2.getElementById("ifream").value = "hello" } </script>

ps: dom加载的完时候只能获取ifream的这个节点,他里面的内容获取不到,所以有关ifream的操作需要注册到window.onload活着别的事件下才能正确获取ifream的document对象

原文地址:https://www.cnblogs.com/somesayss/p/2837916.html