JavaScript中父子頁面資料互動執行個體詳解

js中關於父子頁面資料互動一些寫法

1.window.frames["test"].document.getElementById(‘menu’);
2.//由於所有的函數都存放在window對象裡面，可去掉開頭的window：
3.frames["test"].document.getElementById(‘menu’);
4.//在瀏覽器中，幀的name屬性被預設等同於子頁面的window對象，因此可以進一步簡寫：
5.test.document.getElementById(‘menu’);
window.frames["test"].document.getElementById('menu');
//由於所有的函數都存放在window對象裡面，可去掉開頭的window：
frames["test"].document.getElementById('menu');
//在瀏覽器中，幀的name屬性被預設等同於子頁面的window對象，因此可以進一步簡寫：
test.document.getElementById('menu');2.2 父頁面訪問子頁面函數或對象。子頁面的函數和對象都在其window對象裡，同上，關鍵是擷取該對象。

Java代碼

1.//假如child.html定義了showMesg函數，需要在父中調用，則這樣寫
2.window.frames['test'].showMesg();
3.//簡寫形式
4.test.showMesg();
5.//同理，對象也是如此訪問
6.alert(test.person);
//假如child.html定義了showMesg函數，需要在父中調用，則這樣寫
window.frames['test'].showMesg();
//簡寫形式
test.showMesg();
//同理，對象也是如此訪問
alert(test.person);

例子

父視窗：a1.html

代碼如下

複製代碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>   <head>     <title>a.html</title>       <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">     <meta http-equiv="description" content="this is my page">     <meta http-equiv="content-type" content="text/html; charset=UTF-8">   </head>   <script language="JavaScript">  function openWin(){   window.open("./a2.html","_blank","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");  }  function setValues(id,name){   document.getElementById("cid").value = id;   document.getElementById("cname").value = name;  }   </script>     <body>     <form name="form1" action="test.html" method="post" >           客戶id: <input type="text" name="cid" value=""  id="cid"  ><br>      客戶名稱<input type="text" name="cname" value=""  id="cname"  >     <input type="button" name="ok" value="請選擇客戶" onclick="openWin();"/>       </form> </body>   </html>

子視窗：a2.html

代碼如下

複製代碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>   <head>     <title>a2.html</title>     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">     <meta http-equiv="description" content="this is my page">     <meta http-equiv="content-type" content="text/html; charset=UTF-8">   </head>    <script language="JavaScript">  function viewData(id,name){   window.opener.setValues(id,name);   window.opener = null;   window.close();  }   </script>   <body>       <table border="1">          <tr>           <td>操作</td>    <td>客戶id</td>    <td>客戶名稱</td>          </tr>         <tr>           <td><input type="button" value="選擇" id="ss" onclick="viewData('001','深圳華為')"></td>    <td>001</td>    <td>深圳華為</td>          </tr>     <tr>           <td><input type="button" value="選擇"   onclick="viewData('002','用友軟體')"> </td>    <td>002</td>    <td>用友軟體</td>          </tr>       </table>   </body>       </html>