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。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　-----------------------  原創文章如需轉載請聯繫做者