父页面调用子页面js的方法
iframe子页面调用父页面javascript函数的方法
今天遇到一个iframe子页面调用父页面js函数的需求，解决起来很简单，但是在chrome浏览器遇到一点小问题。顺便写一下iframe的父页面调用子页面javascript函数的方法吧，备用！
1、iframe子页面调用 父页面js函数
子页面调用父页面函数只需要写上window.praent就可以了。比如调用a()函数，就写成：
window.praent.a();
但是我在chrome浏览器下却发现此方法无效了！查了半天才了解，在chrome 5+中，window.parent无法在file://协议中运行，但是发布了之后http://协议下是可以运行的。此方法支持ie、firefox浏览器。
2、iframe父页面调用 子页面js函数
这个就稍微复杂一些，下面的方法支持ie和firefox浏览器：
document.getElementById('ifrtest').contentWindow.b();
注：ifrtest是iframe框架的id，b()为子页面js函数。contentWindow属性是指定的frame或者iframe所在的window对象，IE下可以省略。
父页面（parent.html）：
- <!DOCTYPE html >
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>parent</title>
- </head>
- <body>
- <input type="button" value="call child" onclick="callChild()"/>
- <iframe name="child" src="child.html" ></iframe>
- <script>
- function parentFunction() {
- alert('function in parent');
- }
- function callChild() {
- //child 为iframe的name属性值，不能为id，因为在FireFox下id不能获取iframe对象
- child.window.childFunction();
- }
- </script>
- </body>
- </html>
子页面（iframe页面，child.html）：
- <!DOCTYPE html >
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>child</title>
- </head>
- <body>
- <input type="button" value="call parent" onclick="callParent()"/>
- <script>
- function childFunction() {
- alert('function in child');
- }
- function callParent() {
- parent.parentFunction();
- }
- </script>
- </body>
- </html>
父页面调用子页面js的方法的更多相关文章
- layer通过父页面调用子页面的方法及属性
引言 在使用layer.js的过程中,需要通过layer.open()以iframe的形式打开特定的页面,同时需要用layer的按钮对打开的页面进行提交及重置操作,但是苦于不知如何在父页面调用子页面的 ...
- 使用iframe父页面调用子页面和子页面调用父页面的元素与方法
在实际的项目开发中,iframe框架经常使用,主要用于引入其他的页面.下面主要介绍一下使用iframe引入其他页面后,父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素. 1.父页面 ...
- layer父页面调用子页面的方法
由于不知道如何在子页面获取到layer定义的确定按钮,于是就在子页面上定义了一个方法,然后在由父页面在点确定按钮时调用子页面所定义的这个方法,从而执行子页面方法里面的内容: 子页面代码: functi ...
- vue 父组件调用子组件内置方法
背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...
- Angular 4 父组件调用子组件中的方法
1. 创建工程 ng new demo3 2. 创建子组件 ng g component child 3. 在子组件中定义方法greeting 4. 父组件html(第三行是模板中调用子组件的方法) ...
- 父组件调用子组件中的方法- this.$refs.xxx.子组件方法();
子组件中有一个说的方法 在父组件中去调用当你点击的时候 去调用子组件中的方法 fu.vue 在父组件的方法中调用子组件的方法,很重要 this.$refs.mychild.parentHandlecl ...
- iframe 父页面调用子页面的vue方法
父页面代码: html: <div id="app"> //省略业务代码x行..... <iframe sr ...
- 在子jsp页面中调用父jsp中的function或父jsp调用子页面中的function
项目场景: A.jsp中有一个window,window里嵌入了一个<iframe>,通过<iframe>引入了另一个页面B.jsp.在B.jsp中的一个function中需要 ...
- vue.js组件之间通讯--父组件调用子组件的一些方法，子组件暴露一些方法，让父组件调用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- [不断更新中] 各种错误&&总结
各种错误 无论感觉多稳都要对拍对拍对拍!!! 不要爆long long 不要爆long long 不要爆long long 不要爆long long 不要爆long long 不要爆long long ...
- Python学习-while循环语句
Python 编程中 while 语句用于循环执行程序,即在某条件下,循环执行某段程序,以处理需要重复处理的相同任务.即重复性的做一件事情 语法形式如下: while 判断条件: 条件满足执行语句…… ...
- exists关键词和case表达式
首先声明一下,exist和case没有必然联系,这里只是为了一起整理个笔记. EXIST谓词 如果存在对应的记录,返回TRUE.否则,返回FALSE.*实际使用中,即使不适用exist,基本也可以使用 ...
- 洛谷 3178 [HAOI2015]树上操作
[题解] 就是个树链剖分的模板题. #include<cstdio> #include<algorithm> #include<cstring> #define L ...
- ACM-ICPC 2018 徐州赛区网络预赛 J. Maze Designer
传送门:https://nanti.jisuanke.com/t/31462 本题是一个树上的问题:结点间路径问题. 给定一个有N×M个结点的网格,并给出结点间建立墙(即拆除边)的代价.花费最小的代价 ...
- 【DIP, 图像增强】
第四章 图像增强 图像增强是按特定的需要突出一幅图像中的某些信息,同时削弱或者去除某些不需要的信息的处理方法.其主要目的是使处理后的图像对某种特定的应用来说,比原始图像更加适用.因此这类处理是为了某种 ...
- RequestMapping_PathVariable注解
[@PathVariable 映射URL绑定的占位符] 1.带占位符的URL是Spring 3.0 新增的功能,该功能在Spring MVC向 REST 目标挺进发展过程中具有里程碑的意义. 2.通过 ...
- 对百词斩&可可英语的测试
第六周小组作业 基本任务:功能测试和测试管理 温馨提示:本篇博客中,看不清的图片,可以按住Ctrl同时滚动鼠标滚轮查看:也可以点击图片下方的链接,在新选项卡打开后,点击小加号查看. (1)计划说明 本 ...
- Android layer-list（3）
Android layer-list(3) 在附录文章3.4的基础上,就Android layer-list再写一个较为复杂的应用. 先写布局文件,该布局涉及到LinearLayoutCompa ...
- noip模拟赛 都市
分析:是一道非常有意思的题,30分的暴力的话枚举每个位置是什么数,然后排个序,用map判一下重就好了,比较麻烦. 满分做法显然不可能讨论每个位置所有的情况,肯定是有规律的,现将这n*(n-1)/2个数 ...