子頁面iframe跨域執行父頁面定義的JS方法

問題需求：父頁面與子頁面iframe跨域巢狀，子頁面要觸發父頁面所定義的js方法、父子頁面的資料傳遞。

下文中會用到一些檔案：父頁面： parent.html；嵌在父頁面的子iframe頁面：child.html。

同域時 iframe 呼叫父頁面的js方法

在同域的情況下，子iframe頁面可以很方便地直接呼叫父頁面定義的js方法：window.parent.fn(); 或者 window.top.fn();

當頁面中不存在 iframe 巢狀時，則 window.self, window.parent, window.top 三者均是當前視窗自身的引用。比如，parent.html 和 child.html 均在 a.com 的同一網域名稱下：

window.parent.sayhi(); //或者 top.sayhi();

當的鏈結與父頁面不同域時，則子頁面的 iframe 不能呼叫父頁面定義的方法，會報錯；如：parent.html 在 a.com 網域名稱下，但子 iframe 的鏈結與 a.com 不同域：

實際上，跨域直接呼叫其它頁面所定義的js方法是做不到的。

postmessage 的傳送與接收

window.postmessage 是 html5 提供的乙個跨域解決方案。基本的傳送和接收使用如下。

（1）傳送：otherwindow.postmessage(message, targetorigin, [transfer]);

引數說明：

message: 將要傳送到其他 window的資料；

otherwindow:其他視窗的乙個引用，如iframe的contentwindow屬性、執行window.open返回的視窗物件、或者是命名過或數值索引的window.frames；

targetorigin: 通過視窗的origin屬性來指定哪些視窗能接收到訊息事件，其值可以是字串」*」（表示無限制）或者乙個uri。

（2）接收：

window.addeventlistener("message", function
(event)
});

event 包含很多的資訊，其中重要的幾個分別是：

跨域時 iframe 觸發父頁面的js方法，資料雙向傳輸

a.com 網域名稱下的父頁面 parent.html 定義了功能函式 sayhi()；父頁面 parent.html 中巢狀了子 iframe 頁面 child.html(在網域名稱b.com網域名稱下) 。現在要實現：1）在child.html中引起觸發、執行父頁面定義的 sayhi()方法。2）在child.html中向父頁面請求獲取資料 uname 值。

基本思路：parent.html 和 child.html 2個頁面分別設定傳送和接收，如下：

1） child.html**：

2） child.html 中引入的js檔案 sdk_child.js **：

;(function
();    sdk.uname = null
;    
//傳送
sdk.getuname = function
(), "*")};
sdk.sayhi = function
(info)
}, "*")};
//接收
window.addeventlistener("message", function
(e)        }
});//寫入window
window.sdk =sdk;
})();

3） parent.html 中引入的js檔案 sdk_parent.js**：

;(function
(), 'b.com');
},sayhi: 
function
(info),
};//監聽接收
window.addeventlistener("message", function
(e)        }
});})();

子頁面iframe跨域執行父頁面定義的JS方法

iframe 跨域父頁面向子頁面傳值

iframe跨域獲取的父頁面URL

iframe跨域獲取的父頁面URL

子頁面iframe跨域執行父頁面定義的JS方法

iframe 跨域 父頁面向子頁面傳值

iframe跨域獲取的父頁面URL

iframe跨域獲取的父頁面URL

相關推薦

iframe 跨域父頁面向子頁面傳值