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）：

  1. <!DOCTYPE html >
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>parent</title>
  6. </head>
  7. <body>
  8. <input type="button" value="call child" onclick="callChild()"/>
  9. <iframe name="child" src="child.html" ></iframe>
  10. <script>
  11. function parentFunction() {
  12. alert('function in parent');
  13. }
  14. function callChild() {
  15. //child 为iframe的name属性值，不能为id，因为在FireFox下id不能获取iframe对象
  16. child.window.childFunction();
  17. }
  18. </script>
  19. </body>
  20. </html>

子页面（iframe页面，child.html）：

  1. <!DOCTYPE html >
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>child</title>
  6. </head>
  7. <body>
  8. <input type="button" value="call parent" onclick="callParent()"/>
  9. <script>
  10. function childFunction() {
  11. alert('function in child');
  12. }
  13. function callParent() {
  14. parent.parentFunction();
  15. }
  16. </script>
  17. </body>
  18. </html>

父页面调用子页面js的方法的更多相关文章

  1. layer通过父页面调用子页面的方法及属性

    引言 在使用layer.js的过程中,需要通过layer.open()以iframe的形式打开特定的页面,同时需要用layer的按钮对打开的页面进行提交及重置操作,但是苦于不知如何在父页面调用子页面的 ...

  2. 使用iframe父页面调用子页面和子页面调用父页面的元素与方法

    在实际的项目开发中,iframe框架经常使用,主要用于引入其他的页面.下面主要介绍一下使用iframe引入其他页面后,父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素. 1.父页面 ...

  3. layer父页面调用子页面的方法

    由于不知道如何在子页面获取到layer定义的确定按钮,于是就在子页面上定义了一个方法,然后在由父页面在点确定按钮时调用子页面所定义的这个方法,从而执行子页面方法里面的内容: 子页面代码: functi ...

  4. vue 父组件调用子组件内置方法

    背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...

  5. Angular 4 父组件调用子组件中的方法

    1. 创建工程 ng new demo3 2. 创建子组件 ng g component child 3. 在子组件中定义方法greeting 4. 父组件html(第三行是模板中调用子组件的方法) ...

  6. 父组件调用子组件中的方法- this.$refs.xxx.子组件方法();

    子组件中有一个说的方法 在父组件中去调用当你点击的时候 去调用子组件中的方法 fu.vue 在父组件的方法中调用子组件的方法,很重要 this.$refs.mychild.parentHandlecl ...

  7. iframe 父页面调用子页面的vue方法

                    父页面代码:            html: <div id="app"> //省略业务代码x行..... <iframe sr ...

  8. 在子jsp页面中调用父jsp中的function或父jsp调用子页面中的function

    项目场景: A.jsp中有一个window,window里嵌入了一个<iframe>,通过<iframe>引入了另一个页面B.jsp.在B.jsp中的一个function中需要 ...

  9. vue.js组件之间通讯--父组件调用子组件的一些方法，子组件暴露一些方法，让父组件调用

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. 2018NOIP普及T4---对称二叉树

    题目 对称二叉树   题目描述 思路 检查是否符合对称条件 条件很简单——结构对称&&点权对称 要做到点权对称其实也就顺便结构对称了 于是条件可以简化为点权对称 可以考虑并行搜索 bo ...

  2. Openstack manila的一些命令

    (本文是测试环境进行的操作:) 1.查看一些信息: [root@openstackcontroller ~]# manila type-list [root@openstackcontroller ~ ...

  3. 每日命令：（6）rmdir

    今天学习一下linux中命令: rmdir命令.rmdir是常用的命令,该命令的功能是删除空目录,一个目录被删除之前必须是空的.(注意,rm - r dir命令可代替rmdir,但是有很大危险性.)删 ...

  4. chrome浏览器安装网页测试插件postman的图文介绍

    用户在开发或者调试网络程序或者是网页B/S模式的程序的时候是需要一些方法来跟踪网页请求的,用户可以使用一些网络的监视工具比如著名的Firebug等网页调试工具.今天给大家介绍的这款网页调试工具不仅可以 ...

  5. vuex----mutation和action的基本使用

    我们要实现的很简单,就是点击+1的count加一,点击-1的时候count-1 一.mutation 在vue 中,只有mutation 才能改变state.  mutation 类似事件,每一个mu ...

  6. 洛谷 4364 [九省联考2018]IIIDX

    [题解] 一眼可以想到一个类似二叉树后序遍历的贪心做法,然而这个做法在有相同数字的情况下是错误的.最简单的反例就是n=4,d={1,1,1,2},正解是1,1,2,1,而贪心是1,1,1,2. 所以这 ...

  7. A - Restaurant

    UVA 1468 Description   Mr. Kim is planning to open a new restaurant. His city is laid out as a grid ...

  8. vue api

    1. vue.config.silent = true 取消 Vue 所有的日志与警告. 2.vue.config.productionTip= false 设置为 false 以阻止 vue 在启动 ...

  9. mongodb数据库的一些常用命令列表

    超级用户相关:use admin #增加或修改用户密码db.addUser(ixigua,'pwd') #查看用户列表db.system.users.find() #用户认证db.auth(ixigu ...

  10. 《深入理解PHP内核》

    http://www.php-internals.com/ http://www.cnblogs.com/zcy_soft/category/252731.html