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. JavaScript Simple Explain and Use

    Javascript 说明: JavaScript 和 Java 之间几乎没有任何关系. JavaScript原名为LiveScript,他的作用只是为了处理一些复杂的动态网页. 目前,JS是遵循EC ...

  2. KMP瞎扯一下

    什么是KMP KMP俗称看毛片算法,是高效寻找匹配字串的一个算法 百度百科 KMP算法是一种改进的字符串匹配算法,由D.E.Knuth,J.H.Morris和V.R.Pratt同时发现,因此人们称它为 ...

  3. 搭建私有docker仓库

    安装docker yum install docker 启动docker systemctl start docker 拉取registry镜像 docker pull registry 创建仓库配置 ...

  4. python virtualenv 虚拟环境的应用

    为什么要使用python的虚拟环境呢?: 首先我们来说不实用虚拟环境的情况: 在Python应用程序开发的过程中,系统安装的Python3只有一个版本:3.7.所有第三方的包都会被pip3安装到   ...

  5. c++行事准则

    1.c++包含多种编程范式,每种范式遵循不同的准则: 2.除了#include和#ifdef之流,其他预处理器别用,多用enum和const: 3.函数声明定义多用const:

  6. LA 3029 Subsequence

    LA 3029 A sequence of N positive integers (10 < N < 100 000), each of them less than or equal ...

  7. c#string类型反序列化成字典类型

    c# 实现string类型转化为字典类型:黄色底纹为需要引用的dll,可以在网站下载! 下载地址:http://download.csdn.net/download/xinping_168/47107 ...

  8. redis学习——系统管理

    Redis系统管理 实验简介 上一节实验讲述了Redis的基本数据类型,本实验继续讲解Redis相关命令及管理操作. 在Redis中,命令大小写不敏感. 一.适合全体类型的常用命令 启动redis服务 ...

  9. Mysql中Group By使用Having语句配合查询(where和having区别)

    注意 : having语句一般结合GROUP BY一起使用的..... Having短语与WHERE的区别!!! WHERE子句作用于基表或视图,从中选择满足条件的元组.HAVING短语作用于组,从中 ...

  10. nyoj_68_三点顺序_201404152013

    三点顺序 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 现在给你不共线的三个点A,B,C的坐标,它们一定能组成一个三角形,现在让你判断A,B,C是顺时针给出的还是逆 ...