翼度科技»论坛 编程开发 JavaScript 查看内容

iframe标签下的通信

5

主题

5

帖子

15

积分

新手上路

Rank: 1

积分
15
通常在页面中嵌套iframe的情况下还需要进行消息传递的通信需求。一般分为两种情况:
1.iframe里的链接与父页面链接是非跨域
        这种情况处理比较简单,直接在父级页面下就可以写脚本控制iframe里的元素,同时对iframe里的元素进行操作,例如绑定事件,当事件触发时发送消息给父级页面。
        具体实践脚本如下:
  1.     try{
  2.     //绑定窗口消息事件,接收来iframe发送的消息
  3.     window.addEventListener('message', function(ev) {
  4.         if(ev.data.source == 'pt_event' && ev.data.message == 'iframeButton'){
  5.             _pt_sp_2.push('setCustomEvent',{eventName:'buy_product'});
  6.         }
  7.     }, false)
  8.     //为了避免iframe加载较慢,等2s后绑定元素事件,处理事件触发后获取相关信息并发送父级页面
  9.     setTimeout(function(){
  10.         var buttons = document.querySelectorAll('div[id^=product-component-');
  11.         if(buttons){
  12.             buttons.forEach(function(iframeButton){     
  13.                     iframeButton.querySelector('iframe').contentDocument.body.
  14.                     querySelector('.shopify-buy__btn').
  15.                     addEventListener('click',function(){
  16.                         var msg={};
  17.                         msg['source'] = 'pt_event';
  18.                         msg['message'] = 'iframeButton';
  19.                       parent.postMessage(msg,'*');
  20.                     },false)
  21.             })
  22.         }
  23.     },2000)
  24. }catch(e){
  25.     console.log('ptmsg:'+e)
  26. }
复制代码
2.iframe里的链接与父页面链接是跨域关系,这种情况需要在父页面与iframe里分别进行编写脚本进行接收消息与发送消息。
        父页面中监听消息:
  1. try{
  2.     window.addEventListener('message', function(ev) {
  3.         if(ev.data.source == 'pt_event' && ev.data.message == 'iframeButton'){
  4.             _pt_sp_2.push('setCustomEvent',{eventName:'buy_product'});
  5.         }
  6.     }, false)
  7. }catch(e){
  8.     console.log('ptmsg:'+e)
  9. }
复制代码
        iframe中事件监听及发送消息:
  1. try{
  2.     var btn_event = document.body.querySelector('.layout_image');
  3.     if(btn_event){
  4.         btn_event.addEventListener('click',function(){
  5.         var msg={};
  6.         msg['source'] = 'pt_event';
  7.         msg['message'] = 'iframeButton';
  8.         parent.postMessage(msg,'*');
  9.         },false)
  10.     }
  11. }catch(e){
  12.     console.log('ptmsg:'+e)
  13. }
复制代码
 

来源:https://www.cnblogs.com/yangzhihui/p/iframe_postmessage.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

举报 回复 使用道具