Javascript 使用postMessage對iframe跨域傳值或通訊
實現目標:兩個網站頁面實現跨域相互通訊
當前例子依賴於 jQuery 3.0
父頁面程式碼:www.a.com/a.html
<iframe id="myIframe" src="http://www.b.com/b.html"></iframe> <script> var $myIframe = $('#myIframe'); // 注意:必須是在框架內容載入完成後才能觸發 message 事件哦 $myIframe.on('load', function(){ var data = { act: 'article', // 自定義的訊息型別、行為,用於switch條件判斷等。。msg: { subject: '跨域通訊訊息收到了有木有~', author: 'CSDN-神神的蝸牛' } }; // 不限制域名則填寫 * 星號, 否則請填寫對應域名如 http://www.b.com $myIframe[0].contentWindow.postMessage(data, '*'); }); // 註冊訊息事件監聽,對來自 myIframe 框架的訊息進行處理 window.addEventListener('message', function(e){if (e.data.act == 'response') { alert(e.data.msg.answer); } else { alert('未定義的訊息: '+ e.data.act); } }, false); </script>
子頁面程式碼:www.b.com/b.html
<script> // 註冊訊息事件監聽,對來自 myIframe 框架的訊息進行處理 window.addEventListener('message', function(e){ if (e.data.act == 'article') { alert(e.data.msg.subject);// 向父窗框返回響應結果 window.parent.postMessage({ act: 'response', msg: { answer: '我接收到啦!' } }, '*'); } else { alert('未定義的訊息: '+ e.data.act); } }, false); </script>
或子頁面的 按鈕直接觸發:
//向父窗框返回結果
window.parent.postMessage({ act: 'response', msg: { answer: '我接收到啦3321!'} }, '*');
//********************************************************************************************************************************
方案二:
<script src="../js/layui/layui.js?v=12" charset="utf-8"></script>
<iframe id="myIframe" src="http://localhost:8633/WebForm2.aspx"></iframe>
<script>
layui.use(['form', 'layedit', 'laydate', 'upload', 'element'], function () {
var form = layui.form,
layer = layui.layer,
layedit = layui.layedit,
laydate = layui.laydate;
// 註冊訊息事件監聽,對來自 myIframe 框架的訊息進行處理
window.addEventListener('message', function(e){
if (e.data.act == 'response') {
alert(e.data.msg.answer);
parent.$('#series_name').val('我被改變了');
parent.layer.closeAll(); //瘋狂模式,關閉所有層
} else {
alert('未定義的訊息: '+ e.data.act);
}
}, false);
});
</script>