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 ...
随机推荐
- zabbix 报警方式之 邮件报警（4）
一.为什么要自定义邮件脚本报警? 灵活,方便.可以自定义过滤信息. 下面是使用不同方式的邮件报警,一个是利用sendEmail程序来发送报警邮件,第二个是利用python脚本来发送邮件. 二.send ...
- [BZOJ][CQOI2014]数三角形
Description 给定一个nxm的网格,请计算三点都在格点上的三角形共有多少个.下图为4x4的网格上的一个三角形. 注意三角形的三点不能共线. Input 输入一行,包含两个空格分隔的正整数m和 ...
- PropertyGrid 重难点总结
PropertyGrid的界面组成与不同部分的名称如下图所示. 本博文不算是自己写作的,只是将PropertyGrid中的几项十分有用的功能的应用方面的文字进行一下总结,希望以后大家对Property ...
- 「小程序JAVA实战」小程序通用模板的使用（17）
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-17/ 小程序也为了页面增加了通用模板的功能,如何去理解一个通用的模板呢?模板的定义就是为了让我们的 ...
- django admin 中实现word文档下载
为了实现此功能,需要用到的知识点: (1)django admin 自定义字段: 参考:http://www.cnblogs.com/wumingxiaoyao/p/6928297.html ...
- linux命令 环境设置 顺序
转 http://blog.csdn.net/dingxy/article/details/4016383 在登录Linux时要执行文件的过程如下: 在刚登录Linux时,首先启动 /etc/prof ...
- Ubuntu更新命令 <转>
apt-cache search package 搜索包 apt-cache show package 获取包的相关信息,如说明.大小.版本等 sudo apt-get install package ...
- 如何安装和使用Karma-Jasmine
注意:本文中出现的资料链接.karma的插件安装等,均可能需要翻$墙后才能正确执行. Jasmine是一个JavaScript的测试工具,在Karma上运行Jasmine可完成Javascript的自 ...
- 微信小程序开发注意点和坑集
开发(Tips) 避开频繁setData * 小程序端对于频繁的逻辑层和显示层的交互很不友好,特别是安卓机,与浏览器上js直接操作DOM不同,小程序通过逻辑更新显示层并不完全实时,开发者应避免出现 ...
- Linux实战教学笔记47：JAVA企业级应用服务器之TOMCAT实战
第一章 Tomcat简介 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache,Sun和其他一些公司及个人共 ...