父页面调用子页面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" ...
随机推荐
- Vim常用快捷键--正常的学习曲线
vim可能对于初学者不太友好,学习曲线有点陡,特此整理了较为平滑的学习曲线的学习快捷键的方式,包含最常用的快捷键,让初学者领悟vim的优点,想要进阶学习请查找其它更好的教程 正常模式:可以使用快捷键命 ...
- LINUX-APT 软件工具 (Debian, Ubuntu 以及类似系统)
apt-get install package_name 安装/更新一个 deb 包 apt-cdrom install package_name 从光盘安装/更新一个 deb 包 apt-get u ...
- 洛谷 4768 LOJ 2718「NOI2018」归程
[题解] 本题有多种做法,例如可持久化并查集.kruskal重构树等. kruskal重构树的做法是这样的:先把边按照海拔h从大到小的顺序排序,然后跑kruskal建立海拔的最大生成树,顺便建krus ...
- 常州模拟赛d8t1 友好数对
分析:其实就是问你有多少对a,b有且仅有两位不相同.我们可以先枚举这两位,对应ai枚举一位,对应bi枚举一位,如果ai^(1<<x) == bi^(1<<y),证明恰好有两位不 ...
- hdu 2647拓扑排序 结构体模拟容器
#include<stdio.h> #include<queue> #include<iostream> using namespace std; #define ...
- android中listview点击监听器onItemClick四个参数的含义
public void onItemClick(AdapterView<?> arg0, View view, int position, long arg3) X, Y两个listvie ...
- H - Tickets
Jesus, what a great movie! Thousands of people are rushing to the cinema. However, this is really a ...
- 工作流框架Activiti
最近在看一些项目设计方面的文章,涉及到了工作流技术,于是了解一下. 1.概念 工作流(Workflow),就是“业务过程的部分或整体在计算机应用环境下的自动化”,它主要解决的是“使在多个参与者之间按照 ...
- - > 动规讲解基础讲解一——01背包（模板）
作为动态规划的基础,01背包的思想在许多动规问题中会经常出现,so,熟练的掌握01背包的思路是极其重要的: 有n件物品,第i件物品(I = 1,2,3…n)的价值是vi, 重量是wi,我们有一个能承重 ...
- Ubuntu 16.04设置开机关机时显示命令详细信息不显示进度条Logo
1.编辑grub文件 sudo gedit /etc/default/grub 把 GRUB_CMDLINE_LINUX_DEFAULT="quiet splash" 改成 GRU ...