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

This article introduces the use of postMessage in html5 cross-domain communication. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

PostMessagePortal.html page code

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

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

So much for sharing the usage of postMessage in html5 cross-domain communication. I hope the above content can be helpful to you and learn more knowledge. If you think the article is good, you can share it for more people to see.

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.