iframe标签下的通信-Toy模板网

这篇具有很好参考价值的文章主要介绍了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) 
}

文章来源地址https://www.toymoban.com/news/detail-651062.html

到了这里，关于iframe标签下的通信的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！