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. 记一些关于acm的小知识(自用,粗糙,勿点呀)

    #define INF 0x7ffffff,定义一个很大的数

  2. 将登录代码模块化，然后用add address接口来调用它，success！

    登录模块,单独写成mylogin()方法,保存为modeltry119.py,然后接口的文件只写接口, 在post请求时,引用mylogin()返回的cookies就好了. requests.post ...

  3. DAS、NAS、SAN、iSCSI 存储方案概述

    (转自https://blog.csdn.net/tianlesoftware/article/details/6201346) 目前服务器所使用的专业存储方案有DAS.NAS.SAN.iSCSI几种 ...

  4. Python-函数和代码复用

    函数的定义与使用 >函数的理解与定义 函数是一段代码的表示 -函数是一段具有特定功能的.可重用的语句组 -函数是一种功能的抽象,一般函数表达特定功能 -两个作用:降低编程难度 和 代码复用 de ...

  5. BZOJ 4919 [Lydsy1706月赛]大根堆 (SRM08 T3)

    [题解] 求一个序列的LIS有一个二分做法是这样的:f[i]表示长度为i的上升序列中最后一个数最小可以是多少,每次二分大于等于当前数字x的f[j],把f[j]修改为x:如果找不到这样的f[j],那就把 ...

  6. 洛谷 2476 [SCOI2008]着色方案

    50%的数据满足:1 <= k <= 5, 1 <= ci <= 3 100%的数据满足:1 <= k <= 15, 1 <= ci <= 5 [题解] ...

  7. BZOJ 1726 洛谷 2865 [USACO06NOV]路障Roadblocks【次短路】

    ·求1到n的严格次短路. [题解] dijktra魔改?允许多次入队,改了次短路的值也要入队. #include<cstdio> #include<algorithm> #de ...

  8. 3.3.3 char 类型

        char类型原本用于表示单个字符.不过,现在情况已经有所变化.如今,有些Unicode字符可以用一个char值描述,另外一些Unicode字符则需要两个 char 值.       char类 ...

  9. vue 添加axios解决post传参数为null问题

    本文主要参考: https://www.npmjs.com/package/axios http://jingyan.baidu.com/article/29697b916d6a7bab20de3cf ...

  10. ACM-ICPC国际大学生程序设计竞赛北京赛区(2015)网络赛 Scores

    #1236 : Scores 时间限制:4000ms 单点时限:4000ms 内存限制:256MB 描述 Kyle is a student of Programming Monkey Element ...