Iframe父页面与子页面之间的调用
2014-12-19 21:16 龙恩0707 阅读(14981) 评论(8) 编辑 收藏 举报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); });