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. P1541 乌龟棋 题解(洛谷,动态规划递推)

    题目:P1541 乌龟棋 感谢大神的题解(他的写的特别好) 写一下我对他的代码的理解吧(哎,蒟蒻就这能这样...) 代码: #include<bits/stdc++.h> #define ...

  2. LinuxMint19.1安装搜狗拼音输入法

    Installation 1.到搜狗拼音输入法官网下载Linux版. 2.使用dpkg命令安装deb软件包 $ sudo dpkg -i sogoupinyin_2.2.0.0108_amd.deb ...

  3. chrome://plugins 无法打开的解决方法，同时解决“该网页已屏蔽插件-adobe flash player”

    chrome打开想要看视频时提示该网页已屏蔽插件-adobe flash player,在网上查了半天说在chrome plugins里面打开就可以了.可是chrome://plugins 无法打开, ...

  4. 使用Mybatis-Generator自动生成Dao、Model、Mapping相关文件(转)-----https://www.cnblogs.com/smileberry/p/4145872.html

    https://www.cnblogs.com/smileberry/p/4145872.html 使用Mybatis-Generator自动生成Dao.Model.Mapping相关文件(转)

  5. ansible playbooks loop循环

    在一个task中循环某个操作 1.标准循环 - name: add several users user: name: "{{ item }}" state: present gr ...

  6. Butterfly

    Butterfly 时间限制:C/C++ 2秒,其他语言4秒空间限制:C/C++ 131072K,其他语言262144K64bit IO Format: %lld 题目描述 给定一个n*m的矩阵,矩阵 ...

  7. Visual Assist X破解版安装（vs2010助手）

    从网上下载了Visual Assist X 版本号的破解版,安装文件夹为默认的c://program files/Visual Assist X/,当我把破解的VA_X.dll粘贴到该文件夹下,VC+ ...

  8. 基于Volley，Gson封装支持JWT无状态安全验证和数据防篡改的GsonRequest网络请求类

    这段时间做新的Android项目的client和和REST API通讯框架架构设计.使用了非常多新技术,终于的方案也相当简洁优雅.client仅仅须要传Java对象,server端返回json字符串, ...

  9. Rsync命令的使用

    Rsync的命令格式能够为下面六种: rsync [OPTION]- SRC DEST rsync [OPTION]- SRC [USER@]HOST:DEST rsync [OPTION]- [US ...

  10. window.setTimeout() 和window.setInterval() 的差别

    setTimeout 和setInterval的功能都是经过某一个时间段后发生某件指定的事件或者方法. 如window.setTimeout("sleep()",5000);指的是 ...