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; 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>

相关阅读:
十五。JAVA方法的分类
八。java数组
十三。第三章实例
十二。工具类中算法的实现
九。求JAVA最大，最小，平均值
十四。JAVA类的认识
十一。查找
Listview中使用线程实现无限加载更多项目的功能
PL/SQL Developer的常用技巧
android异步加载图片

原文地址：https://www.cnblogs.com/dubaokun/p/3490022.html