主页面 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; 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>