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

This article mainly explains "how to use postMessage of html5". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use postMessage of html5".

The code is as follows:

Title

Var targetOrigin = "http://22527.vhost20.boxcdn.cn";

Var defaultTitle = "Portal"

Var notificationTimer = null

Function messageHandler (e) {

If (e.origin = = targetOrigin) {

Notify (e.data)

} else {

/ / ignore messages from other origins

}

}

Function sendString (s) {

Document.getElementById ("widget") .contentWindow.postMessage (s, targetOrigin)

}

Function notify (message) {

StopBlinking ()

BlinkTitle (message, defaultTitle)

}

Function stopBlinking () {

If (notificationTimer! = = null) {

ClearTimeout (notificationTimer)

}

Document.title = defaultTitle

}

Function blinkTitle (M1, m2) {

Document.title = M1

NotificationTimer = setTimeout (blinkTitle, 1000, m2, M1)

}

Function sendStatus () {

Var statusText = document.getElementById ("statusText") .value

SendString (statusText)

}

Function loadDemo () {

Document.getElementById ("sendButton") .addEventListener ("click", sendStatus, true)

Document.getElementById ("stopButton") .addEventListener ("click", stopBlinking, true)

SendStatus ()

}

Window.addEventListener ("load", loadDemo, true)

Window.addEventListener ("message", messageHandler, true)

Cross-domain communication

Convey the message:

Confirm

Stop the title flashing

Code for the postMessageWidget.html page

Copy the code

The code is as follows:

Title

Var targetOrigin = "http://www.weixiu0376.cn";

/ / TODO whitelist array

Function messageHandler (e) {

If (e.origin = = "http://www.weixiu0376.cn") {

Document.getElementById ("status") .textContent = e.data

} else {

/ / ignore messages from other origins

}

}

Function sendString (s) {

Window.top.postMessage (s, targetOrigin)

}

Function loadDemo () {

Document.getElementById ("actionButton") .addEventListener ("click"

Function () {

Var messageText = document.getElementById ("messageText") .value

SendString (messageText)

}, true)

}

Window.addEventListener ("load", loadDemo, true)

Window.addEventListener ("message", messageHandler, true)

Display received information:

Send a message

Thank you for your reading, the above is the content of "how to use html5 postMessage", after the study of this article, I believe you have a deeper understanding of how to use html5 postMessage, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.