Iframe父页面与子页面之间的调用
Iframe父页面与子页面之间的调用
专业词语解释如下：
Iframe：iframe元素是文档中的文档。
window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象。但是，如果一个文档定义了一个或者多个框架(即：包含一个或者多个frame或者iframe标签)，浏览器就会为原始文档创建一个window对象，再为每个iframe创建额外的window对象，这些额外的window对象是原始窗口的子窗口。
contentWindow: 是指指定的iframe或者iframe所在的window对象。
如果想要学习 "iframe之间的通信问题及iframe高度自适应"，请看这边文章：
父页面与子页面之间的调用。
现在我们可以慢慢做demo来分别讲解下，假如有iframe父页面为 iframe1.html, 父页面上有2个子页面 分别为iframe2.html 和 iframe3.html。
父页面iframe1.html代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery1.7.js"></script>
</head>
<body>
<iframe src="http://localhost/iframe/iframe3.html" id = "iframe3"></iframe>
<iframe src="http://localhost/iframe/iframe2.html" id = "iframe2"></iframe>
<div class="iframe1">父页面</div>
<script>
function test2() {
console.log(1);
}
</script>
</body>
</html>
子页面iframe2.html代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery1.7.js"></script>
</head>
<body>
<div id="test">aaa</div>
<div class="iframe2">子页面</div>
<script>
function b() {
console.log("我是子页面");
}
function iframe3Page() {
console.log("iframe3页面调用iframe2页面");
}
</script>
</body>
</html>
1. 子页面iframe2.html调用父页面 iframe1.html的元素如下代码：
console.log($('.iframe1',parent.document));
2. 子页面iframe2.html调用父页面iframe1.html的函数如下代码：
parent.test2();
注意：父页面iframe1.html页面 中test2方法不能放在$(function(){}), 放在里面就调用不到。
3. 子页面iframe2.html调用自身的iframe(假如父页面有很多iframe，获取自身iframe不通过id或者name属性).
1. 首先我们可以在父页面上写一个函数 用来获取页面所有的iframe，之后进行遍历，进行判断当前的window对象是否相同。如下代码：
function getFrame(f){
var frames = document.getElementsByTagName("iframe");
for(i=0;i<frames.length;i++){
if(frames[i].contentWindow == f){
return(frames[i])
}
}
}
2. 在子页面iframe2.html中如下调用父页面的方法 getFrame.
/* 获取自身的iframe */
var aa = parent.getFrame(this);
console.log(aa);
$(aa).attr("flag",true);
给iframe2设置属性 flag: true, 如下截图：
4. 父页面iframe1.html调用子页面 iframe2.html的元素及函数
如下调用有误的：
console.log(document.getElementById("iframe2").contentWindow.b());
因为iframe2.html 有可能未加载完成，所以要等iframe2加载完成后再进行调用，所以我们需要 iframe2.onload = function(){}; 这样再进行调用。为了兼容IE，我们可以如下封装一个方法：
function iframeIsLoad(iframe,callback){
if(iframe.attachEvent) {
iframe.attachEvent('onload',function(){
callback && callback();
});
}else {
iframe.onload = function(){
callback && callback();
}
}
}
调用方式如下：
// 父页面调用子页面iframe2的方法
var iframe2 = document.getElementById("iframe2");
iframeIsLoad(iframe2,function(){
iframe2.contentWindow.b(); // 打印出 我是子页面
// 父页面获取子页面iframe2的元素
var iframeDom = $(".iframe2",iframe2.contentWindow.document);
console.log(iframeDom);
});
Iframe父页面与子页面之间的调用的更多相关文章
- iframe父窗口和子窗口之间的调用
1>父窗口获取子窗口 js方法 document.getElementById('if1').contentWindow.document: window.frames["if1&qu ...
- Iframe父页面与子页面之间的相互调用
iframe元素就是文档中的文档. window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者i ...
- iframe 框架 父页面与子界面之间的变量、函数、元素获取
1.获取页面上的iframe 1-1. document.getElementById('iframeId'): 1-2. window.frames[0].window.frames['frameN ...
- IFrame父页面和子页面的交互
现在在页面里面用到iframe的情况越来越少了,但有时还是避免不了,甚至这些页面之间还需要用js来做交互,那么这些页面如何操作彼此的dom呢?下面将会逐步介绍. 1.父页面操作子页面里面的dom 下面 ...
- js父页面和子页面之间传值
今天和朋友一块讨论,怎样通过js在父页面和子页面之间传值的问题,总结例如以下: 需求描写叙述:父页面有多个子页面.实如今父页面点击子页面,传值到子页面. 看着非常easy,试了好久.主要纠结在怎样获取 ...
- 使用iframe父页面调用子页面和子页面调用父页面的元素与方法
在实际的项目开发中,iframe框架经常使用,主要用于引入其他的页面.下面主要介绍一下使用iframe引入其他页面后,父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素. 1.父页面 ...
- JQuery操作iframe父页面与子页面的元素与方法
JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元 ...
- iframe父页面与子页面赋值
最近因为公司之前的系统用iframe,里面的高度不能自适应,导致了很多问题,今天特意拿来研究一下,从网上找了一些方法试验了一下,这里记录一下成功的方法 1.父页面获取子页面的高度,并给父页面赋值 父页 ...
- JavaScript从父页面获取子页面的值（子页面又如何访问父页面）
之前还真没做过类似的东西,,top页面获取子页面的document.. 在百度搜了下即找到这个东东,还好,能用. 主要就是使用 contentWindow方法,获取子页面的所有document,再做处 ...
随机推荐
- iOS_动态插入或删除行
终于效果图: 分MVC三层设计;自己定义的Cell有两种;一种是MainCell,由ModelArr提供数据源;还有一种是插入的cell,由代码创建,而且由另外一个数组供状态数据 数据源部分: wat ...
- Cocos2d-x 手机游戏《疯狂的蝌蚪》资源 “开源” win32+安德鲁斯+iOS三合一
郝萌主倾心贡献,尊重作者的劳动成果,转载请注明出处 From郝萌主. 假设文章对您有所帮助.欢迎给作者捐赠,支持郝萌主,捐赠数额任意,重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载 ...
- Java达到MySQL数据库备份（两）
博客<Java实现MySQL数据库备份(一)>使用I/O流的方式实现了MySQL数据库的备份,这样的方法比較繁杂.以下介绍还有一种备份MySQL数据库的方法: import java.io ...
- Android开发技巧——实现在图标文本底部导航栏（更新）
本文参考了导航栏的代码viewpagerindicator实现. 本文介绍了之前版本号qq或者微信,添加文本,实现图标,导航栏的底部. 2014-09-14 13:59:42更新:library的代码 ...
- 大约 C++ 几个方面分析--overload, override, overwrite, rewrite
overload, override, overwrite, rewrite 这几个单词常常出如今 C++ 书中,翻阅一些译版后发现并未对 override, overwrite, rewrite 严 ...
- .net卸载程序制作
原文:.net卸载程序制作 方法一: 在打包项目中添加文件msiexec.exe(一般在c:\windows\system32(系统目录中)找到). 在文件系统视图中选择应用程序文件,在msiexec ...
- 【iOS】多线程GCD
GCD(Grand Central Dispatch) : 牛逼的中枢调度器.苹果自带,纯C语言实现,提供了许多且强大的函数,它能够提高代码的运行效率与多核的利用率. 一.GCD的基本使用 1.GCD ...
- 考试easy该，学习如何做？
我的两个学生(场和任)都讲了他们周末參加的一个认证考试不考大题考小题的事情.由感而发: 话说不用大题考,大概是不敢用大题考. 老师的教.和学生的学中.存在的一些问题得不到解决,整体讲,学生的学习效果没 ...
- 十天学Linux内核之第十天---总结篇(kconfig和Makefile & 讲不出再见)
原文:十天学Linux内核之第十天---总结篇(kconfig和Makefile & 讲不出再见) 非常开心能够和大家一起分享这些,让我受益匪浅,感激之情也溢于言表,,code monkey的 ...
- windows平台搭建lighttpd+php+sqlite
(一)php 1. 下载及安装 http://www.appservnetwork.com/ 从上面的网址下载appserv-win32-2.5.10并安装,在安装的时候,仅仅选择安装php. 由于, ...