Detailed explanation of html5 postMessage to solve the problem of cross-domain communication

This article mainly introduces the relevant information that explains in detail how html5 postMessage solves the problem of cross-domain communication. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

This article introduces the detailed explanation of html5 postMessage to solve the problem of cross-domain communication and shares it with everyone. The details are as follows:

Rendering:

Postmessage parsing HTML5 provides a new mechanism PostMessage to achieve secure cross-source communication.

Syntax:

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow: a reference to other windows, such as the contentWindow property of IFRAME, executed, window.open returns window object.

message: Data to be sent to other windows.

targetOrigin: Use the origin attribute of the window to specify which windows can receive message events. Its value can be the character "*" (indicating unlimited) or a URL. transfer: is a string of Transferable that is delivered at the same time as the message. object. Ownership of these objects will be transferred to the recipient of the message, and the sender will no longer retain ownership.

element.addEventListener(event,fn,useCaption); Three parameters event event such as click mouseenter mouseleave callback function useCaption is used to describe whether to bubble or capture. The default value is false, which means bubble delivery. When the value is true, it is captured and passed. Implementation method

Main interface main.html

  
  
  
  
  



  

     我是主界面,等待接收iframe的传递
  
  

     iframe
     
  

iframe interface

  
  
  
  
    


  
        

           点击改变颜色
        
        
  

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit Html5 Video Tutorial!

Related recommendations:

php public welfare training video tutorial

HTML5 graphic tutorial

HTML5Online Manual

The above is the detailed content of Detailed explanation of html5 postMessage to solve the problem of cross-domain communication. For more information, please follow other related articles on the PHP Chinese website!