父页面调用子页面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" ...
随机推荐
- MySql的存储过程和触发器
Mysql的存储过程是类似于其它编程语言中的函数的功能,存储过程内部可以使用顺序循环和转移三种基本程序结构,而且整个存储过程可以接受和返回参数. 创建存储过程(procedure)时,因为其内部有以; ...
- 四角递推(CF Working out,动态规划递推)
题目:假如有A,B两个人,在一个m*n的矩阵,然后A在(1,1),B在(m,1),A要走到(m,n),B要走到(1,n),两人走的过程中可以捡起格子上的数字,而且两人速度不一样,可以同时到一个点(哪怕 ...
- Many Equal Substrings CodeForces - 1029A (kmp next数组应用)
题目大意 题目看样例也能猜到就是输出最短的循环串. 吐槽 明明是div3第一题为啥子还会用到kmp的知识? 解法 这个题仔细看发现是求最长可去除的后缀,也就是说去除跟下一个相同的字符串还能连接起来.这 ...
- 使用vuex实现父组件调用子组件方法
曲线救国. 核心原理就是父子共用一个vuex对象,且看代码: 父组件parent.vue <template> <div class="wrap"> < ...
- 洛谷 2434 [SDOI2005]区间
[题解] 鲜活的大水题... 把区间排个序然后瞎搞就可以了,发现现在区间的左端点比之前区间的最大的右端点还大,那就增加一个答案区间.每次更新目前最大右区间. #include<cstdio> ...
- 九九乘法表-Java
public class Test1 { public static void main(String[] args){ for(int i=1;i<=9;i++){ for(int j=1;j ...
- 【Codeforces 675D】Tree Construction
[链接] 我是链接,点我呀:) [题意] 依次序将数字插入到排序二叉树当中 问你每个数字它的父亲节点上的数字是啥 [题解] 按次序处理每一个数字 对于数字x 找到最小的大于x的数字所在的位置i 显然, ...
- Linux学习总结（18）——Linux使用init命令关机、重启、切换模式
reboot可能是每个用过Linux的人都知道的命令,但有一个命令"init"才是命令中的精英. 最近有个同事学习安装了CentOS,明明安装的是带桌面的系统,但是启动后进入了命令 ...
- [NOIP2004]FBI树
题目描述 我们可以把由“0”和“1”组成的字符串分为三类:全“0”串称为B串,全“1”串称为I串,既含“0”又含“1”的串则称为F串. FBI树是一种二叉树,它的结点类型也包括F结点,B结点和I结点三 ...
- java 远程调用
1.webservice (soap+http) -aixs -axis2 -xfire—>cxf 2.webservice问题 -基于xml,xml效率,(数据传输效率,xml序列化效率) - ...