Iframe父页面与子页面之间的调用

2014-12-19 21:16 龙恩0707 阅读(15007) 评论(8) 编辑收藏举报

Iframe父页面与子页面之间的调用

专业词语解释如下：

Iframe：iframe元素是文档中的文档。

window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象。但是，如果一个文档定义了一个或者多个框架(即：包含一个或者多个frame或者iframe标签)，浏览器就会为原始文档创建一个window对象，再为每个iframe创建额外的window对象，这些额外的window对象是原始窗口的子窗口。

contentWindow: 是指指定的iframe或者iframe所在的window对象。

如果想要学习 "iframe之间的通信问题及iframe高度自适应"，请看这边文章：

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的元素如下代码：

1	`console.log($('.iframe1',parent.document));`

2. 子页面iframe2.html调用父页面iframe1.html的函数如下代码：

1	`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的元素及函数

如下调用有误的：

1	`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);
 
});