javascript 多个frame之间的交互

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