postMessage()
方法在
MessagePort
interface sends a message from the port, and optionally, transfers ownership of objects to other browsing contexts.
port.postMessage(message, transferList);
Void.
The message you want to send through the channel. This can be of any basic data type. Multiple data items can be sent as an array.
Transferable
objects to be transferred — these objects have their ownership transferred to the receiving browsing context, so are no longer usable by the sending browsing context.
In the following code block, you can see a new channel being created using the
MessageChannel.MessageChannel
constructor. When the IFrame has loaded, we pass
MessageChannel.port2
to the IFrame using
window.postMessage
along with a message. The
handleMessage
handler then responds to a message being sent back from the IFrame using
onmessage
, putting it into a paragraph —
MessageChannel.port1
is listened to, to check when the message arrives.
var channel = new MessageChannel();
var para = document.querySelector('p');
var ifr = document.querySelector('iframe');
var otherWindow = ifr.contentWindow;
ifr.addEventListener("load", iframeLoaded, false);
function iframeLoaded() {
otherWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
}
channel.port1.onmessage = handleMessage;
function handleMessage(e) {
para.innerHTML = e.data;
}
For a full working example, see our channel messaging basic demo on Github ( run it live too ).
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of 'postMessage()' in that specification. |
实时标准 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
postMessage
|
Chrome 4 | Edge 12 | Firefox Yes | IE 10 | Opera 10.6 | Safari 5 | WebView Android Yes | Chrome Android 18 | Firefox Android 不支持 No | Opera Android 11 | Safari iOS 5.1 | Samsung Internet Android 1.0 |
完整支持
不支持
MessagePort
BeforeUnloadEvent
DOMStringMap
ErrorEvent
GlobalEventHandlers
HTMLAnchorElement
HTMLAreaElement
HTMLAudioElement
HTMLBRElement
HTMLBaseElement
HTMLBaseFontElement
HTMLBodyElement
HTMLButtonElement
HTMLCanvasElement
HTMLContentElement
HTMLDListElement
HTMLDataElement
HTMLDataListElement
HTMLDialogElement
HTMLDivElement
HTMLDocument
HTMLElement
HTMLEmbedElement
HTMLFieldSetElement
HTMLFormControlsCollection
HTMLFormElement
HTMLFrameSetElement
HTMLHRElement
HTMLHeadElement
HTMLHeadingElement
HTMLHtmlElement
HTMLIFrameElement
HTMLImageElement
HTMLInputElement
HTMLIsIndexElement
HTMLKeygenElement
HTMLLIElement
HTMLLabelElement
HTMLLegendElement
HTMLLinkElement
HTMLMapElement
HTMLMediaElement
HTMLMetaElement
HTMLMeterElement
HTMLModElement
HTMLOListElement
HTMLObjectElement
HTMLOptGroupElement
HTMLOptionElement
HTMLOptionsCollection
HTMLOutputElement
HTMLParagraphElement
HTMLParamElement
HTMLPictureElement
HTMLPreElement
HTMLProgressElement
HTMLQuoteElement
HTMLScriptElement
HTMLSelectElement
HTMLShadowElement
HTMLSourceElement
HTMLSpanElement
HTMLStyleElement
HTMLTableCaptionElement
HTMLTableCellElement
HTMLTableColElement
HTMLTableDataCellElement
HTMLTableElement
HTMLTableHeaderCellElement
HTMLTableRowElement
HTMLTableSectionElement
HTMLTemplateElement
HTMLTextAreaElement
HTMLTimeElement
HTMLTitleElement
HTMLTrackElement
HTMLUListElement
HTMLUnknownElement
HTMLVideoElement
HashChangeEvent
历史
ImageData
定位
MessageChannel
MessageEvent
Navigator
NavigatorGeolocation
NavigatorID
NavigatorLanguage
NavigatorOnLine
NavigatorPlugins
PageTransitionEvent
Plugin
PluginArray
PopStateEvent
PortCollection
PromiseRejectionEvent
RadioNodeList
Transferable
ValidityState
Window
WindowBase64
WindowEventHandlers
WindowTimers