Cross-window messaging with postMessage

Ref: http://javascript.info/tutorial/cross-window-messaging-with-postmessage#example

Cross-window messaging API is supported by all modern browsers including IE8. It allows windows/frames from multiple domains to communicate with each other.
To send a message to another window referenced by win, the postMessage method is used.
Syntax is postMessage(data, targetDomain), where:
data
The message. Accordin to the specification, it could be any object. But as of now, only strings are supported in major browsers.
targetDomain
Limit receiving iframe by given domain. Can contain ‘*’ which doesn’t put any restrictions.
Usually, the domain of iframe is known, so it is recommended to pass it as the targetDomain argument for better security.

Example

Let’s see how it works from the sending side.
01<iframe src="http://a.JavaScript.info/files/tutorial/window/receive.html" id="iframe" style="height:60px"></iframe>
02
03<form name="form">
04  <input type="text" name="msg" value="Your message"/>
05  <input type="submit"/>
06</form>
07
08<script>
09
10  var win = document.getElementById("iframe").contentWindow
11
12  document.forms.form.onsubmit = function() {
13    win.postMessage(
14      this.elements.msg.value,
15      "http://a.JavaScript.info"
16    )
17    return false
18  }
19
20</script>
By pressing the button, you send the message to iframe on another domain. The browser controls that the domain must be a.JavaScript.info (targetDomain).

The receiving side

The receiving side hooks on a message event. The source of the iframe, used in the example above:
01<div id="test">Send me a message!</div>
02<script>
03function listener(event){
04  if ( event.origin !== "http://javascript.info" )
05    return
06
07  document.getElementById("test").innerHTML = "received: "+event.data
08}
09
10if (window.addEventListener){
11  addEventListener("message", listener, false)
12} else {
13  attachEvent("onmessage", listener)
14}
15</script>
Note that the browser guarantees that event.origin contains the real domain which sent the message. There is no way for JavaScript hacker to replace it.
Usually you’d want to filter who may send messages/commands to iframe and who may not.
Cross-window messaging security model is two-sided. The sender ensures that the receiving domain is targetDomain. The receiver checks that the message came from proper event.origin.
The special propertys of a message event are:
data
The first argument of postMessage
origin
The source domain
source
The reference to sending window. It is possible to respond by calling event.source.postMessage('..response message..', event.origin).

Nifty details

The messages are passed using internal browser API. So there is no network communication at all.
In IE8, it is possible to use win.postMessage for iframes only, not for other tabs/windows. That’s the bug of implementation. Other browsers don’t suffer from that.

Summary

The postMessage API allows to communicate between windows in a safe, cross-browser way.
Works in all madern major browsers including Chrome/Safari, Firefox, Opera and IE8.
IE8 doesn’t allow to postMessage to other windows, only to iframes.


Ref:
       http://javascript.info/tutorial/cross-window-messaging-with-postmessage#example
       http://javascript.info/tutorial/frames-and-windows

评论

发表评论

此博客中的热门博文

XML, XSL, HTML

The code in this section is that an XSLT transform is used to translate XML input data to HTML output. Ref: https://docs.oracle.com/javase/tutorial/jaxp/xslt/transformingXML.html Note - The article1a.xsl , which is from in XSLT examples . The following code is for joy.  import java.awt.Desktop; import java.io.*; import java.net.URISyntaxException; import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import javax.xml.parsers.ParserConfigurationException; import javax.xml.transform.Transformer; import javax.xml.transform.TransformerConfigurationException; import javax.xml.transform.TransformerException; import javax.xml.transform.TransformerFactory; import javax.xml.transform.dom.DOMSource; import javax.xml.transform.stream.StreamResult; import javax.xml.transform.stream.StreamSource; // For write operation import org.w3c.dom.Document; import org.w3c.dom.Element; import org.xml.sax.SAXException; public class Stylizer { ...
阅读全文

Input in element.eleme.io

Input Input data using mouse or keyboard. Input is a controlled component, it always shows Vue binding value . Under normal circumstances, input event should be handled. Its handler should update component's binding value (or use v-model ). Otherwise, input box's value will not change. Do not support v-model modifiers. ¶ Basic usage < el-input placeholder = "Please input" v-model = "input" > </ el-input > < script > export default { data() { return { input : '' } } } </ script > Hide ¶ Disabled Disable the Input with the disabled attribute. < el-input placeholder = "Please input" v-model = "input" :disabled = "true" > </ el-input > < script > export default { data() { return { input : '' } } } </ script > ¶ Clearable Make the Input clearable with the...
阅读全文

Data URI是由RFC 2397 ACE

https://www.rfc-editor.org/rfc/rfc2397 http://codingpy.com/article/how-to-turn-your-browser-into-code-editor/ https://ace.c9.io/build/kitchen-sink.html https://c9.io/ https://angular-ui.github.io/ The "data" URL scheme Status of this Memo This document specifies an Internet standards track protocol for the Internet community, and requests discussion and suggestions for improvements. Please refer to the current edition of the "Internet Official Protocol Standards" (STD 1) for the standardization state and status of this protocol. Distribution of this memo is unlimited. Copyright Notice Copyright (C) The Internet Society (1998). All Rights Reserved. 1 . Abstract A new URL scheme, "data", is defined. It allows inclusion of small data items as "immediate" data, as if it had been included externally. 2 . Description Some applications that use URLs also have a need to embed (small...
阅读全文