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 ...
随机推荐
- Protobuf3教程
Protobuf3教程 https://blog.csdn.net/hulinku/article/details/80827018 Protobuf语言指南——.proto文件语法详解 https: ...
- [Z] 关于Python Tornado的一些资料
一个简单的样例: http://osedu.net/article/python/2014-03-18/501.html ioloop的官方doc: http://www.tornadoweb.org ...
- ARM汇编 均值滤波实验
实验要求是排序后去掉最大值最小值,然后把剩下的求平均数. 排序可以用之前的冒泡排序,关键的问题是求平均数.因为ARM没有除法,应该怎么求平均数呢? 最简单的方法就是减法了,用被除数一直减除数,看减了多 ...
- C++与C#有关对库(动态库dll,静态库.lib)文件的调用
1 动态库的相互调用 1.1 C#调用C++ dll步骤(只能导出方法): 1. c++建立空项目->源文件文件夹中添加cpp文件和函数 2. c++属性设置中,配置类型设置为动态库dll,公共 ...
- TextBox 设置数据源的自动补全输入字符串功能
这个东西首先说明是不是自己原创,但是比较简单.所以讲起分享如下.主要是用到TextBox的自动补全属性,这个东西虽然自己以前经常用TextBox,但是补全从没接触过. 关键代码是在窗体载入时加载如下代 ...
- Spring IOC基础
2.1.1 IOC是什么IOC—Inversion of Control,即“控制反转”,不是什么技术,而是一种设计思想.在Java开发中,IOC意味着将你设计好的对象交给容器控制,而不是传统的在你的 ...
- Phong Shading
[Phong Shading] The most serious problem with Gouraud shading occurs when specular highlights are fo ...
- SSH(安全协议外壳)介绍及Linux SSH免密登录
SSH(安全外壳协议) SSH 为 Secure Shell 的缩写,是一种网络安全协议,专为远程登录会话和其他网络服务提供安全性的协议.通过使用 SSH,可以把传输的数据进行加密,有效防止远程管理过 ...
- 排查MySQL事务没有提交导致 锁等待 Lock wait timeout exceeded
解决思路: select * from information_schema.innodb_trx 之后找到了一个一直没有提交的只读事务, kill 到了对应的线程后ok 了. 转载自:http:// ...
- Java网络编程小结 URLConnection协议处理器
URL和URLConnection类 网络中的URL(Uniform Resource Locator)是统一资源定位符的简称.它表示Internet上某一资源的地址.通过URL我们可以访问Inter ...