Detailed explanation of new features of HTML5: Cross-document message transmission

黄舟

Release： 2017-03-30 11:55:52

Original

1974 people have browsed it

1. Same domain restriction

The so-called "same domain restriction" refers to For security reasons, browsers only allow scripts to communicate with addresses of the same protocol, same domain name, and same port.

2. Window.postMessage method

Browser restrictions are different Communication between windows (including iFrame windows), unless the two windows load web pages under the same domain name. The window.postMessage method is specifically designed to solve this problem, allowing users of different domain names to communicate. Windows communicate with each other. The format of the

postMessage method is as follows:

targetWindow.postMessage(message, targetURL[, transferObject]);

Copy after login

The targetWindow in the above code is the

variable

pointing to the target window, message is the message to be sent, and the targetURL is the specified The URL of the target window will not send information if it does not match the URL. The transferObject is the Transferable

object that is sent along with the information. Assume that a new window pops up on the current web page. ##Then listen to the message event

on the current web page.

var popup = window.open(...popup details ...);

Copy after login

The above code specifies the

callback function of the message event is receiveMessage, once it is received from other windows message, the receiveMessage function will be called. The receiveMessage function accepts an event event object as a parameter. The origin attribute

in the parameter indicates the source URL of the message. If the URL does not meet the requirements, event. The data attribute contains the information actually sent. In addition to origin and data, the attributes of the event object also have a source attribute, which points to the window object that sends the information to the current web page.

Then, Use the postMessage method to send information to a new window on the current web page.

window.addEventListener(&#39;message&#39;, receiveMessage, false);
function receiveMessage(e) {    
if (e.origin != &#39;http://example.org&#39;) {        
return;
    }

    console.log(e.data);
}

Copy after login

The first parameter of the postMessage method in the above code is the actual information sent, and the second parameter specifies that the domain name of the sending object must be http: //example.org. If the other party's window is not this domain name, the information will not be sent.

Finally, deploy the following code in the popup window.

popup.postMessage(&#39;hello world!&#39;, &#39;http://example.org&#39;);

Copy after login

There are several places in the above code. Note. First of all, there is no source of filtered information in the receiveMessage function, and information sent from any URL will be processed. Secondly, the URL of the target window specified in the postMessage method is an asterisk, indicating that the information can be sent to any URL. Generally speaking, these two methods are not recommended because they are not safe enough and may be filtered by the other party.

All browsers support this method, but IE8 and IE9 only allow the postMessage method to communicate with the iFrame window and not with the new window. IE10 allows communication with new windows, but only using the IE-specific MessageChannel object

The above is the detailed content of Detailed explanation of new features of HTML5: Cross-document message transmission. For more information, please follow other related articles on the PHP Chinese website!