准备工作;
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对象