iframe標簽下的通信

通常在頁面中嵌套iframe的情況下還需要進行消息傳遞的通信需求。一般分為兩種情況：

1.iframe里的鏈接與父頁面鏈接是非跨域

        這種情況處理比較簡單，直接在父級頁面下就可以寫腳本控制iframe里的元素，同時對iframe里的元素進行操作，例如綁定事件，當事件觸發時發送消息給父級頁面。

        具體實踐腳本如下：

    try{ 
    //綁定視窗消息事件，接收來iframe發送的消息
    window.addEventListener('message', function(ev) { 
        if(ev.data.source == 'pt_event' && ev.data.message == 'iframeButton'){ 
            _pt_sp_2.push('setCustomEvent',{eventName:'buy_product'}); 
        } 
    }, false) 
    //為了避免iframe載入較慢，等2s後綁定元素事件，處理事件觸發後獲取相關信息併發送父級頁面
    setTimeout(function(){ 
        var buttons = document.querySelectorAll('div[id^=product-component-'); 
        if(buttons){ 
            buttons.forEach(function(iframeButton){     
                    iframeButton.querySelector('iframe').contentDocument.body.
                    querySelector('.shopify-buy__btn').
                    addEventListener('click',function(){
                        var msg={}; 
                        msg['source'] = 'pt_event'; 
                        msg['message'] = 'iframeButton'; 
                      parent.postMessage(msg,'*'); 
                    },false) 
            }) 
        } 
    },2000) 
}catch(e){ 
    console.log('ptmsg:'+e) 
}

2.iframe里的鏈接與父頁面鏈接是跨域關係,這種情況需要在父頁面與iframe里分別進行編寫腳本進行接收消息與發送消息。

        父頁面中監聽消息：

try{ 
    window.addEventListener('message', function(ev) { 
        if(ev.data.source == 'pt_event' && ev.data.message == 'iframeButton'){ 
            _pt_sp_2.push('setCustomEvent',{eventName:'buy_product'}); 
        } 
    }, false) 
}catch(e){ 
    console.log('ptmsg:'+e) 
} 

        iframe中事件監聽及發送消息：

try{ 
    var btn_event = document.body.querySelector('.layout_image'); 
    if(btn_event){ 
        btn_event.addEventListener('click',function(){ 
        var msg={}; 
        msg['source'] = 'pt_event'; 
        msg['message'] = 'iframeButton'; 
        parent.postMessage(msg,'*'); 
        },false) 
    } 
}catch(e){ 
    console.log('ptmsg:'+e) 
}