iframe兄弟間和iframe父子間的值傳遞問題

在網上查了資料。iframe的參數傳遞問題。有很多答案都是不可行的。現在將收集的資料整理一下。已經驗證通過。以下如有問題請及時指正。

1. iframe兄弟之間值傳遞

   舉例說明：index頁面中有兩個iframe：iframe1和iframe2，如下圖：

　　

　在iframe1中：有一個input輸入框，一個變量f1，函數f1Func。

　　

// 獲取iframe1，parent是index頁面的window對象。
var iframe1 = parent.frames["myframe1"];// 此時iframe1就是iframe1頁面的window對象
// 打印iframe1 中的變量
console.log("iframe2 打印iframe1 中的變量", iframe1.f1);
// 調用iframe1 中的函數
console.log("iframe2 調用iframe1 中的函數");
iframe1.f1Func();
// 打印iframe1 中的DOM節點
console.log("iframe2 打印iframe1 中DOM節點",iframe1.document.getElementById('frame1Input'));

　控制台打印如下：

　那么在iframe1中能不能用同樣的方法打印出iframe2中的變量函數呢？可以一試

   結果控制台會報如下錯誤：

    原因是在index頁面iframe1是在iframe2之前進行加載的。我們在iframe1中調用iframe2的東西。iframe2有可能還沒有加載完成。那么我們需要等待iframe2加載完成：

 

   由上可知。iframe之間進行值傳遞。首先是要獲取容器的window對象，在從容器出發尋找兄弟iframe。

2. iframe父子之間值傳遞

    既然我們可以獲取到容器的window對象。那么子iframe獲取父元素的變量等也輕而易舉。parent就是父元素的window對象。我們只需要parent.xxx進行調用即可。

   父元素有如何獲取子ifarme的變量呢？如下：

  控制台打印

  函數和DOM元素同上。

  建議iframe兄弟間和iframe父子間都等到想要獲取的iframe加載完成再進行操作。

  但是iframe相當於一個全新的頁面。父頁面中引入的css和js在iframe頁面是不可以使用的。要重新加載，不建議使用iframe。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　-----------------------  原創文章如需轉載請聯系作者