JS操作网页中的iframe

浏览数：16 / 时间：2015年06月09日

 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>