How to perform cross-domain communication in html5

This time I will show you how to use HTML5 for cross-domain communication, and how to use h5 for cross-domain communication? What are the precautions for h5 cross-domain communication? The following is a practical case, let’s take a look.

I recently encountered a need at work. The scenario is: 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 the h5 page makes responsive changes. 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. In the current scenario, it is iframe.contentWindow;

message is the message sent. Before Gecko 6.0, the message must be a

string , and later versions can send the object directly without serializing it yourself;

targetOrigin means Set the origin of the target window. 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 will 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 attributes:

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 the 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 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);
    }
}

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

Summary of all elements and basic syntax of H5

##How to use video and audio tags and progress bars in H5

How to implement drag and drop function in H5

The above is the detailed content of How to perform cross-domain communication in html5. For more information, please follow other related articles on the PHP Chinese website!