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>
javascript 多个frame之间的交互的更多相关文章
- 在android中实现webview与javascript之间的交互(转）
参见“在android中实现webview与javascript之间的交互”
- frame与frame之间怎么用jquery传值
frame与frame之间如何用jquery传值 使用jquery操作iframe 1. 内容里有两个ifame <iframe id="leftiframe"...< ...
- WebBrowser一点心得，如果在Javascript和Winform代码之间实现双向通信
原文:WebBrowser一点心得,如果在Javascript和Winform代码之间实现双向通信 最近工作需要,学习了一下winform内嵌webbrowser控件,然后与htm页面中的javasc ...
- Mui --- app与服务器之间的交互原理、mui ajax使用
1.APP与服务器之间的交互原理 app端(客户端)与服务端的交互其实理解起来和容易,客户端想服务器端发送请求,服务器端进行数据运算后返回最终结果.结果可以是多种格式: 1.text 文本格式 2.x ...
- 第四节：Vuejs组件及组件之间的交互
一. 组件及其交互 1.组件的注册 (1).全局注册 Vue.component('组件名称', { }) 第1个参数是标签名称,第2个参数是一个选项对象. 选项参数包括 data:必须是一个func ...
- 小程序中的web-view与h5网页之间的交互
官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html web-view 基础库 1.6.4 开始支 ...
- 我的Android第五章：通过Intent实现活动与活动之间的交互
Intent在活动的操作 作用: Itent是Android程序中各个组件直接交换的一个重要方式可以指定当前组件要执行任务同时也可以给各个组件直接进行数据交互 同时Inten ...
- Fragments之间的交互(实现参数传递)
Fragments之间的交互(实现参数传递) 日常开发中,通常Fragments之间可能需要交互,比如基于用户事件改变Fragment的内容.所有Fragment之间的交互需要通过他们关联的Activ ...
- AngularJs-指令和指令之间的交互（动感超人）
前言: 上节我们学习到了指令和控制器之间的交互,通过给指令添加动作,调用了控制器中的方法.本节我们学习指令和指令之间是如何交互的,我们通过一个小游戏来和大家一起学习,听大漠老师说这是国外的人写的dem ...
随机推荐
- Druid.io系列（四）：索引过程分析
原文链接: https://blog.csdn.net/njpjsoftdev/article/details/52956083 Druid底层不保存原始数据,而是借鉴了Apache Lucene.A ...
- Cacti监控服务器配置教程(基于CentOS+Nginx+MySQL+PHP环境搭建)
Cacti监控服务器配置教程(基于CentOS+Nginx+MySQL+PHP环境搭建) 具体案例:局域网内有两台主机,一台Linux.一台Windows,现在需要配置一台Cacti监控服务器对这两台 ...
- 系统架构设计方法论——TOGAF
https://blog.csdn.net/watermelonbig/article/details/77620847 1.ADM的架构开发阶段 ADM方法是由一组按照架构领域的架构开发顺序而排列成 ...
- Volatile关键字以及线程的内存可见性问题
一.Volatile关键字 作用: 当多个线程进行操作共享数据时,可以保证内存中的数据可见,即为一个线程对数据的修改对另外一个线程来说是可见的.相较于 synchronized 是一种较为轻量级的同步 ...
- excel表格的应用之简单的数据可视化
上面的为我们需要的手长与身高的数据 上面的是我们的数据可视化之后的点状图 我们需要先选中我们需要的数据表 然后点击我们插入中的推荐图表的选项 点开后会弹出这个界面 然后我们只需要选择char进行插入就 ...
- 【原】Coursera—Andrew Ng机器学习—课程笔记 Lecture 9_Neural Networks learning
神经网络的学习(Neural Networks: Learning) 9.1 代价函数 Cost Function 参考视频: 9 - 1 - Cost Function (7 min).mkv 假设 ...
- MySQL内置功能之视图、触发器和存储过程
主要内容: 一.视图 二.触发器 三.存储过程 1️⃣ 视图 一.关于视图的理解 1.1.何谓视图? 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名], 用户使 ...
- Solr集群—SolrCloud
1. 学习计划 1.solr集群搭建 2.使用solrj管理solr集群 3.把搜索功能切换到集群版 2. 什么是SolrCloud SolrCloud(solr 云)是Solr提供的分布式搜 ...
- 使用BlendingTexture实现简单的Terrain
[使用BlendingTexture实现简单的Terrain] BlendingTexture,就是一张纹理,纹理内存储的数据用于其它去处的Alpha通道value.例如以下四张图需要混合在Terra ...
- 关于SharePoint 2016
在刚刚过去的Ignite 2015技术会议上,微软发布了一些有关SharePoint 2016的消息.下面是对相关消息的一个简短总结: 1.首先,本地部署版本的SharePoint 2016还会有,嗯 ...