html5 cross-domain communication method through postMessage

The h5 page is embedded in the pc page as a preview module. The user can do some operations on the pc page, 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 makes responsive changes to the data. This article will give you a detailed introduction to the method of cross-domain communication in HTML5 through postMessage.

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

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

otherWindow is a reference to the target window. In the current scenario, it is iframe.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 having to do it yourself. Serialize;

targetOrigin indicates the origin of the target window, and its value can be a 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 if the three completely match, 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 iframe, you can receive the message through the following code.

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 content is the method of html5 cross-domain communication through postMessage. I hope it can help everyone.

Related recommendations:

Sharing the basic usage of postMessage API in HTML5

Using postMessage in HTML5 to transfer data between two web pages

PostMessage in html5 implements POST cross-domain issues in Ajax

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