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

javascript 多个frame之间的交互的更多相关文章

  1. 在android中实现webview与javascript之间的交互(转）

    参见“在android中实现webview与javascript之间的交互”

  2. frame与frame之间怎么用jquery传值

    frame与frame之间如何用jquery传值 使用jquery操作iframe 1. 内容里有两个ifame <iframe id="leftiframe"...< ...

  3. WebBrowser一点心得，如果在Javascript和Winform代码之间实现双向通信

    原文:WebBrowser一点心得,如果在Javascript和Winform代码之间实现双向通信 最近工作需要,学习了一下winform内嵌webbrowser控件,然后与htm页面中的javasc ...

  4. Mui --- app与服务器之间的交互原理、mui ajax使用

    1.APP与服务器之间的交互原理 app端(客户端)与服务端的交互其实理解起来和容易,客户端想服务器端发送请求,服务器端进行数据运算后返回最终结果.结果可以是多种格式: 1.text 文本格式 2.x ...

  5. 第四节：Vuejs组件及组件之间的交互

    一. 组件及其交互 1.组件的注册 (1).全局注册 Vue.component('组件名称', { }) 第1个参数是标签名称,第2个参数是一个选项对象. 选项参数包括 data:必须是一个func ...

  6. 小程序中的web-view与h5网页之间的交互

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html web-view 基础库 1.6.4 开始支 ...

  7. 我的Android第五章：通过Intent实现活动与活动之间的交互

    Intent在活动的操作 作用: Itent是Android程序中各个组件直接交换的一个重要方式可以指定当前组件要执行任务同时也可以给各个组件直接进行数据交互              同时Inten ...

  8. Fragments之间的交互(实现参数传递)

    Fragments之间的交互(实现参数传递) 日常开发中,通常Fragments之间可能需要交互,比如基于用户事件改变Fragment的内容.所有Fragment之间的交互需要通过他们关联的Activ ...

  9. AngularJs-指令和指令之间的交互（动感超人）

    前言: 上节我们学习到了指令和控制器之间的交互,通过给指令添加动作,调用了控制器中的方法.本节我们学习指令和指令之间是如何交互的,我们通过一个小游戏来和大家一起学习,听大漠老师说这是国外的人写的dem ...

随机推荐

  1. 【洛谷】P1064 金明的预算方案（dp）

    题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过N元钱就行”.今 ...

  2. 浅谈PHP面向对象编程（九、设计模式）

    9.0 设计模式 在编写程序时经常会遇到一此典型的问题或需要完成某种特定需求,设计模式就是针对这些问题和需求,在大量的实践中总结和理论化之后优选的代码结构编程风格,以及解决问题的思考方式. 设计模式就 ...

  3. c++ 搜索二叉树 插入，删除，遍历操作

    搜索二叉树是一种具有良好排序和查找性能的二叉树数据结构,包括多种操作,本篇只介绍插入,排序(遍历),和删除操作,重点是删除操作比较复杂,用到的例子也是本人亲自画的 用到的测试图数据例子 第一.构建节点 ...

  4. Oracle调优之buffer pool相关

    一个oracle block与data buffer中的一个buffer对应.用户进程(server process)负责读取磁盘上的block到data buffer cache中,DEWn进程负责 ...

  5. 02——微信小程序官方demo讲解——app部分

    第一节讲了目录结构,这节主要讲解下目录中app.js部分. 它由三部分组成app.js.app.json与app.wxss 1.JS部分 1.1概述 //app.js App({ onLaunch: ...

  6. setKeepAliveTimeout

    setKeepAliveTimeout 定期唤醒 间隔至少600秒唤醒,唤醒后执行的代码最多10秒要执行完成. 与setMinimumBackgroundFetchInterval的区别呢?perfo ...

  7. Delphi IOS 后台定时器

    3.这里有一个问题,就是客户端是通过心跳来和服务端保持连接,心跳是由定时器触发的,当我退到后台以后,定时器方法被挂起,那么通过如下设置来在后台运行定时器 beginBackgroundTaskWith ...

  8. jquery中绑定click事件重复执行问题

    jquery中单击事件重复多次执行的问题使用如下方式: $('#sub').unbind('click').click(function () { ... });

  9. 使用ConfigFilter

    ConfigFilter的作用包括: 从配置文件中读取配置 从远程http文件中读取配置 为数据库密码提供加密功能 1 配置ConfigFilter 1.1 配置文件从本地文件系统中读取 <be ...

  10. default of c#

    [default of c#] 在泛型类和泛型方法中产生的一个问题是,在预先未知以下情况时,如何将默认值分配给参数化类型 T: T 是引用类型还是值类型. 如果 T 为值类型,则它是数值还是结构. 给 ...