主頁面 Web.html (加載了兩個frame 分別為A.html)
<html lang="en"> <head> <meta charset="utf-8"> </head> <body> <div > <iframe name="frame1" src="A.html"></iframe> <iframe name="frame2" src="B.html"></iframe> <button id="webbt">webbt</button> </div> <script type="text/javascript"> //在主頁面中top parent window 三者相等 var frame1= top.frames.frame1; //也可以通過[]來獲取 frame1.onload=function(){ frame1.document.getElementById('pagea').addEventListener('click',function(){ alert("主頁面調用 A子頁面，為page A按鈕綁定了點擊事件"); }); } </script> </body> </html>
A.html
<html lang="en"> <head> <!-- Le styles --> <meta charset="utf-8"> </head> <body> <div > <button id="pagea">PageA</button> <div style="height: 200px;width: 200px" contenteditable="true"></div> </div> <!-- container --> <script type="text/javascript"> window.onload=function(){ top.document.getElementById('webbt').addEventListener('click',function(){ alert("A操作父頁面，為webbt按鈕綁定了點擊事件"); }); }; var frame2=top.frames.frame2; //可以通過parent獲取上一級的文檔，top獲取最頂級的文檔 frame2.onload=function(){ frame2.document.getElementById('pageb').addEventListener('click',function(){ alert("A 操作B頁面中的元素，為pageb按鈕綁定了點擊事件"); }); } </script> </body> </html>
B.html
<html lang="en"> <head> <!-- Le styles --> <meta charset="UTF-8"> </head> <body> <div > <button id="pageb">PageB</button> </div> <!-- container --> </body> </html>