1 /* 2 *parent.html 3 */ 4 5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 6 <html xmlns="http://www.w3.org/1999/xhtml"> 7 <head> 8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 9 <title>这里是parent页面</title> 10 <script type="text/javascript"> 11 window.onload = function (){ 12 var oTxt = document.getElementById("txt"); 13 var oBtn = document.getElementById("btn"); 14 var oI = document.getElementsByTagName("iframe")[0]; 15 console.log(oI); 16 var oW = oI.contentWindow; //获取iframe的Window对象 17 console.log(oW); 18 //debugger; //这个还不太会用 19 var oW2 = oI.contentWindow.document; //获取iframe的document对象 20 console.log(oW2); 21 var oDiv = oW.document.getElementById("div1"); 22 oBtn.onclick = function (){ 23 if(oTxt.value==""){ 24 oDiv.innerHTML = oDiv.innerHTML + "<hr>null<br><br>"; 25 }else{ 26 oDiv.innerHTML = oTxt.value + "<br><br><br><br>"; 27 } 28 } 29 } 30 </script> 31 </head> 32 33 <body> 34 35 <input type="text" name="txt" id="txt" /> <input type="button" value="确定" id="btn" /> 36 46541561456 37 38 <br /><hr /> 39 40 <iframe src="son.html" frameborder="01" height="270" width="980"></iframe> 41 42 <br /><br /><br /><br /><br /> 43 44 45 45455 46 47 </body> 48 </html>
1 /* 2 *son.html 3 */ 4 5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 6 <html xmlns="http://www.w3.org/1999/xhtml"> 7 <head> 8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 9 <title>这里是iframe页面</title> 10 </head> 11 12 <body> 13 14 <h1>这里是Iframe的东西</h1> 15 <div id="div1">789404123<br />f4<br />fff<br /><br /></div> 16 17 145620...0 18 19 20 21 </body> 22 </html>
- 在本地会产生跨域问题
- 解决办法：放在自己安装的环境里运行或跑在服务器上