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

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

可以调用目标 windowpostMessage() 方法向另一个 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 */, '*');
         }
     });