1. 程式人生 > >Javascript 使用postMessage對iframe跨域傳值或通訊

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>