与消息进行安全的跨域通信

window.postMessage() 方法及其相对事件处理程序 window.onmessage 可以安全地用于启用跨源通信。

可以调用目标 window 的 postMessage() 方法向另一个 window 发送消息，window 将能够使用其 onmessage 事件处理程序拦截它，详细说明它，并且如果需要，再次使用 postMessage() 将响应发送回发送方窗口。

窗口与子框架通信的示例

• http://main-site.com/index.html 的内容：

   <!-- ... -->
   <iframe id="frame-id" src="http://other-site.com/index.html"></iframe>
   <script src="main_site_script.js"></script>
   <!-- ... -->
  

• http://other-site.com/index.html 的内容：

   <!-- ... -->
   <script src="other_site_script.js"></src>
   <!-- ... -->
  

• main_site_script.js 的内容：

   // Get the <iframe>'s window
   var frameWindow = document.getElementById('frame-id').contentWindow;
  
   // Add a listener for a response
   window.addEventListener('message', function(evt) {
  
       // IMPORTANT: Check the origin of the data! 
       if (event.origin.indexOf('http://other-site.com') == 0) {
  
           // Check the response
           console.log(evt.data);
           /* ... */
       }
   });        
  
   // Send a message to the frame's window
   frameWindow.postMessage(/* any obj or var */, '*');
  

• other_site_script.js 的内容：

   window.addEventListener('message', function(evt) { 
  
       // IMPORTANT: Check the origin of the data! 
       if (event.origin.indexOf('http://main-site.com') == 0) {
  
           // Read and elaborate the received data
           console.log(evt.data);
           /* ... */
  
           // Send a response back to the main window
           window.parent.postMessage(/* any obj or var */, '*');
       }
   });