Iframe父頁面與子頁面之間的調用

時間 2019-11-12

標籤 iframe 頁面之間調用欄目 HTML 简体版

原文原文鏈接

Iframe父頁面與子頁面之間的調用javascript

專業詞語解釋以下：html

Iframe：iframe元素是文檔中的文檔。java

window對象: 瀏覽器會在其打開一個HTML文檔時建立一個對應的window對象。可是，若是一個文檔定義了一個或者多個框架(即：包含一個或者多個frame或者iframe標籤)，瀏覽器就會爲原始文檔建立一個window對象，再爲每一個iframe建立額外的window對象，這些額外的window對象是原始窗口的子窗口。jquery

contentWindow: 是指指定的iframe或者iframe所在的window對象。瀏覽器

若是想要學習 "iframe之間的通訊問題及iframe高度自適應"，請看這邊文章：框架

iframe之間的通訊問題及iframe高度自適應函數

父頁面與子頁面之間的調用。學習

如今咱們能夠慢慢作demo來分別講解下，假若有iframe父頁面爲 iframe1.html, 父頁面上有2個子頁面分別爲iframe2.html 和 iframe3.html。this

父頁面iframe1.html代碼以下：spa

<!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);

});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。