javascript 多个frame之间的交互

最新推荐文章于 2023-06-08 15:30:11 发布

weixin_34197488

最新推荐文章于 2023-06-08 15:30:11 发布

阅读量155

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dubaokun/p/3490022.html

本文介绍了一个包含多个iframe的网页示例，并演示了主页面与子页面间的交互过程，包括事件绑定及跨iframe操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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