postMessage cross-domain, cross-iframe window message delivery

Article Directory

Speaking of postMessageit, you may not encounter it usually, but if you encounter a problem and can't remember it, record it here to prevent you from forgetting it later.
Insert picture description here

1. Function

window.postMessage()Methods can be safely implemented between Window objects 跨域通信. For example, between a page and the pop-up window it generates, or between the page and the iframe embedded in it.

Under normal circumstances, cross-domain issues are always a problem due to browser "same-origin policy" restrictions, and window.postMessage()a controlled mechanism is provided to safely circumvent this restriction (if used properly).

2. Grammar

Generally speaking, a window can obtain a reference to another window (for example, through targetWindow=window.opener), and then use targetWindow.postMessage()it to distribute MessageEvent. The receiving window can then handle this event on its own as needed, and the passed window.postMessage()parameters are exposed to the receiving window through the event object.

Basic syntax:

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

targetWindow
targetWindow is a reference to the window that receives the message. Methods of obtaining this reference include:

Window.open
Window.opener
HTMLIFrameElement.contentWindow
Window.parent
Window.frames + index value

message The message
to be sent to the target window. The data is serialized using a structured cloning algorithm. This means that we can safely pass all kinds of data objects to the target window without having to serialize them ourselves.

targetOrigin specifies
the source of the target window. It must be consistent with the destination of the message. It can be a string or URI. It means that any target window can be received. For the sake of safety, please be sure to specify the recipient's URI. If so "*", you can receive it.

Optional attribute of transfer . It is a series messageof Transferableobjects that are passed at the same time . The ownership of these objects will be transferred to the receiver of the message, and the sender will no longer retain ownership.

3. Use

postMessage program

var receiver = document.getElementById('receiver').contentWindow;
var btn = document.getElementById('send');
btn.addEventListener('click', function (e) {
    
    
    e.preventDefault();
    var val = document.getElementById('text').value;
    receiver.postMessage("Hello "+val+"！", "http://www.xxx.com");
});

Receiving end

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
    
    
  if (event.origin !== "http://www.xxx.com")
    return;
}

eventThe object has three attributes, namely origin, dataand source. event.dataRepresents the received message; event.originRepresents postMessagethe source of sending, including protocol, domain name and port; event.sourceRepresents the reference of the window object that sends the message; We can use this reference to establish two-way communication between two windows from different sources.

4. Compatibility

Insert picture description here
The overall compatibility is still very good!

5. Application Scenario

Cross-domain communication (including GET requests and POST requests)
WebWorker
The iframe is used in the vue project and parameters need to be passed