本篇文章給大家分享的是有關(guān)如何在html5中使用postMessage解決跨域通信，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

postmessage解析HTML5提供了新型機制PostMessage實現(xiàn)安全的跨源通信. 語法 otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow: 其他窗口的一個引用, 比如IFRAME的contentWindow屬性, 執(zhí)行,window.open返回的窗口對象. message: 將要發(fā)送到其他窗口的數(shù)據(jù). targetOrigin:通過窗口的origin屬性來指定哪些窗口能接收到消息事件, 其值可以是字符”*”(表示無限制)或者一個URL transfer:是一串和message同時傳遞的Transferable對象. 這些對象的所有權(quán)將被轉(zhuǎn)移給消息的接收方, 而發(fā)送一放將不再保有所有權(quán).element.addEventListener(event,fn,useCaption ); 三個參數(shù) event 事件 比如click mouseenter mouseleave 回調(diào)函數(shù) useCaption用于描述是冒泡還是捕獲。默認(rèn)值是false，即冒泡傳遞。 當(dāng)值為true，就是捕獲傳遞。實現(xiàn)方式

主界面 main.html

  
  
  
  
  
         window.addEventListener('message',function(e){
           console.log("e--->",e);
           const data = e.data;
           document.getElementById('main1').style.backgroundColor=e.data;
         },false)

  


  
     我是主界面,等待接收iframe的傳遞