Shulou(Shulou.com)06/03 Report--

This article mainly introduces the HTML5 page message transmission mechanism example analysis, the article is very detailed, has a certain reference value, interested friends must read!

HTML5's Message API enables messages to be passed between HTML5 pages, even if the pages are not under the same domain name.

send a message

In order for a message to be sent from one page to another, the page sending the message must have a window reference to the other page. The send page then calls the postMessage() method on the receive page.

Code demonstration:

var message = "Hello there"; var origin = "http://www.oschina.net"; var theIframe = document.getElementById("theIframe"); theIframe.contentWindow.postMessage(message, origin);

The value of the origin parameter in the postMessage() method must match the domain name of the iframe where the page is located. Otherwise it won't work properly, where you don't need the URL of the entire page, just the main domain name, such as http://localhost or http://www.oschina.net

accept message

In order to accept messages, the page needs to subscribe to the onmessage event handling method. Here is the code that works properly on Firefox and Chrome:

_window.onmessage = function(event) { document.getElementById("show")[xss_clean] = "Message Received: " + event.data + " from: " + event.origin; }

The above code sets the onmessage event handling method of the window. Then find the html element with id "show" in the method, and set the innerHTML of this element to "Message received: " with the real message.

Under IE 9, the same functionality must be implemented in this code.

window.attachEvent("onmessage", function(event) { document.getElementById("show")[xss_clean] = "Message Received: " + event.data + " from: " + event.origin; }

It is recommended that you keep these two copies of code in JS, there is no conflict between them.

The event object will contain the following three attributes.

data origin source

The data property contains the message sent from the send page

The origin property contains the original domain name of the page being sent

The source property contains a reference to the window object that sent the page. This window object can be used to reply to the original send page, just use postMessage( ), as follows:

_window.onmessage = function(event) { event.source.postMessage( "Thank you for the message", event.origin ); }

Send JSON

The Messaging API only allows you to send string type messages. If you need to send a JavaScript object, you will need to convert this object to a JSON string using JSON.stringify( ), and then translate it to a JavaScript object using JSON.parse( ). The code is as follows:

var theObject = { property1 : "hello", property2 : "world" } var message = JSON.stringify(theObject); var origin = "http://tutorials.jenkov.com"; var theIframe = document.getElementById("theIframe"); theIframe.contentWindow.postMessage(message, origin);

The following code is how to convert a JSON string into a JavaScript object.

_window.onmessage = function(event) { var theObject = JSON.parse(event.data); } The above is "Example analysis of page message transmission mechanism in HTML5" All the contents of this article, thank you for reading! Hope to share the content to help everyone, more relevant knowledge, welcome to pay attention to the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.