JavaScript子窗口調用父窗口變量和函數的方法


  在做一個父窗口開啟子窗口並且在子窗口關閉的時候調用父窗口的方法,達到局部刷新的目的。

  父窗口:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns=" http://www.w3.org/1999/xhtml">
 4 <head>
 5   <title>parent</title>
 6   <script type="text/javascript">
 7     var parentPara='parent';
 8     function parentFunction() {
 9       alert(parentPara);
10     }
11   </script>
12 </head>
13 <body>
14   <button onclick="parentFunction()">顯示變量值</button>
15   <button onclick="window.open('child.html')">打開新窗口</button>
16 </body>
17 </html>

  子窗口:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns=" http://www.w3.org/1999/xhtml">
 4 <head>
 5   <title>child</title>
 6   <script type="text/javascript">
 7     function modify() {
 8       opener.parentPara='child';
 9     }
10   </script>
11 </head>
12 <body>
13   <button onclick="opener.parentFunction()">調用父頁面的方法</button>
14   <button onclick="modify()">更改父頁面中變量的值</button> 
15 </body>
16 </html>

  子頁面是父頁面的一個iframe

  父頁面:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns=" http://www.w3.org/1999/xhtml">
 4 <head>
 5   <title>parent</title>
 6   <script type="text/javascript">
 7     function fill() {
 8       //alert(frame1.window.childPara);  //顯示frame1內的變量值
 9       var str=document.getElementById('txt1').value; //獲得文本框內輸入的值
10       frame1.window.div1.innerHTML=str; //將值填入子頁面的一個div中
11     }
12   </script>
13 </head>
14 <body>
15   <div style="background-color:yellow;width:300px;height:300px;">
16     父頁面
17     <iframe id="frame1" src="child.html" frameborder="0" scrolling="no" width="120px" height="120px"></iframe>
18     <br/><br/><br/><br/>
19     <input id="txt1" type="text"/>
20     <button onclick="fill()">將文本框內值填充入子界面</button>
21   </div>
22 </body>
23 </html>

  子頁面:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns=" http://www.w3.org/1999/xhtml">
 4 <head>
 5   <title>child</title>
 6   <script type="text/javascript">
 7     function fun() {
 8       parent.fill();
 9     }
10   </script>
11 </head>
12 <body>
13   <div style="background-color:lightblue;width:100px;height:100px;">
14     <b>子頁面</b><br/>
15     <a href="#" onclick="fun()">同父頁面按鈕</a>
16     <div id="div1" style="color:red;">
17     </div>
18   </div>
19 </body>
20 </html>

  刷新父頁面時,其中的iframe也會隨之刷新;刷新iframe時,父頁面不會刷新。

  另外,如果是在angularJS中的一個模塊調用另一個模塊的方法:主要思路是獲取另一模塊的angular和document,然后用angular.element(document.getElementById("aaa"));

其中:var angular = window.opener.angular;var document = window.opener.document;具體情況視實際情況在獲取。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM