html5 method of cross-domain communication through postMessage_html5 tutorial skills

This article mainly introduces relevant information on the method of cross-domain communication in HTML5 through postMessage. The editor thinks it is quite good. Now I share it with you. You can use the HTML5 source code as a reference. Friends who are interested in HTML5, please follow the editor to have a look

Recently I encountered a need at work. The scenario is: the h5 page is embedded in the pc page as a preview module, and the user in the pc page You can do some operations, and then h5 makes responsive changes to achieve the preview effect.

The first thing that comes to mind here is to embed the h5 page into the pc web page using an iframe, and then the pc sends the changed data to the iframe through the postMessage method. The h5 embedded in the iframe receives the data through addEventListener, and then performs operations on the data. Responsive changes.

Here is a summary of the use of postMessage. The API is very simple:

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

otherWindow is the reference of the target window, which is an iframe in the current scenario. contentWindow;

message is the message sent. Before Gecko 6.0, the message must be a string , but later versions can directly send the object Without serializing it yourself;

targetOrigin indicates the origin of the target window, and its value can be the string "*" (indicating unlimited) or a URI. When sending a message, if any of the protocol, host address, or port of the target window does not match the value provided by targetOrigin, the message will not be sent; only the three match completely. The message will be sent. For confidential data, it is very important to set the target window origin;

When postMessage() is called, a message event will be distributed to the target window. This interface has a message event, which has several important properties:

1.data: As the name suggests, it is the message passed in
2.source: The window object that sends the message
3. Origin: The source of the message window (protocol + host + port number)

In this way, we can receive cross-domain messages, and we can also send messages back in a similar way.

The optional parameter transfer is a string of Transferable objects passed at the same time as the message. The ownership of these objects will be transferred to the receiver of the message, and the sender will no longer retain ownership.

Then, when iframe is initialized, you can get the reference to the iframe and send the message through the following code:

// 注意这里不是要获取iframe的dom引用，而是iframe window的引用
const iframe = document.getElementById('myIFrame').contentWindow;
iframe.postMessage('hello world', 'http://yourhost.com');

In the iframe, you can receive it through the following code information.

window.addEventListener('message', msgHandler, false);

When receiving, you can filter the message origin as needed to avoid XSS attacks caused by receiving messages with illegal domain names.

Finally, for code reuse, message sending and receiving are encapsulated into a class, and the message type API is simulated, which is very convenient to use. The specific code is as follows:

export default class Messager {
    constructor(win, targetOrigin) {
        this.win = win;
        this.targetOrigin = targetOrigin;
        this.actions = {};
        window.addEventListener('message', this.handleMessageListener, false);
    }

    handleMessageListener = event => {
        if (!event.data || !event.data.type) {
            return;
        }
        const type = event.data.type;
        if (!this.actions[type]) {
            return console.warn(`${type}: missing listener`);
        }
        this.actions[type](event.data.value);
    }

    on = (type, cb) => {
        this.actions[type] = cb;
        return this;
    }

    emit = (type, value) => {
        this.win.postMessage({
            type, value
        }, this.targetOrigin);
        return this;
    }

    destroy() {
        window.removeEventListener('message', this.handleMessageListener);
    }
}

The above is the entire content of this article. I hope it will be helpful to everyone's learning, and I also hope that everyone will support the PHP Chinese website.

Related recommendations:

HTML5 opens the mobile phone code scanning function and its advantages and disadvantages_html5 tutorial skills

Detailed graphic and text explanation of postMessage API in H5

Using postMessage in HTML5 to implement POST cross-domain in Ajax

The above is the detailed content of html5 method of cross-domain communication through postMessage_html5 tutorial skills. For more information, please follow other related articles on the PHP Chinese website!