From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/messageport/index.html | 120 +++++++++++++++++++++++++++++ 1 file changed, 120 insertions(+) create mode 100644 files/zh-cn/web/api/messageport/index.html (limited to 'files/zh-cn/web/api/messageport/index.html') diff --git a/files/zh-cn/web/api/messageport/index.html b/files/zh-cn/web/api/messageport/index.html new file mode 100644 index 0000000000..e16d395ebf --- /dev/null +++ b/files/zh-cn/web/api/messageport/index.html @@ -0,0 +1,120 @@ +--- +title: MessagePort +slug: Web/API/MessagePort +tags: + - API + - Channel messaging + - HTML5 + - Interface + - MessagePort + - Reference + - TopicStub +translation_of: Web/API/MessagePort +--- +

{{APIRef("HTML DOM")}}

+ +

Channel Messaging API 的 MessagePort 接口代表 {{domxref("MessageChannel")}} 的两个端口之一， 它可以让你从一个端口发送消息，并在消息到达的另一个端口监听它们。

+ +

{{AvailableInWorkers}}

+ +

方法

+ +

继承自父类 {{domxref("EventTarget")}} 的方法

+ +
+
{{domxref("MessagePort.postMessage")}}
+
从端口发送一条消息，并且可选是否将对象的所有权交给其他浏览器上下文。
+
{{domxref("MessagePort.start")}}
+
开始发送该端口中的消息队列 (只有使用 {{domxref("EventTarget.addEventListener")}} 的时候才需要调用；当使用 {{domxref("MessagePort.onmessage")}} 时，是默认开始的。)
+
{{domxref("MessagePort.close")}}
+
断开端口连接，它将不再是激活状态。
+
+ +

事件回调

+ +

继承自父类 {{domxref("EventTarget")}} 的事件回调

+ +
+
{{domxref("MessagePort.onmessage")}}
+
是一个 {{domxref("EventListener")}}, 当类型为 message 的 {{domxref("MessageEvent")}} 在该端口触发时，它将会被调用──也就是说，该端口收到了一条消息。
+
{{domxref("MessagePort.onmessageerror","onmessageerror")}}
+
是一个 {{domxref("EventListener")}}, 当类型为 {{domxref("MessageError")}} 的 {{domxref("MessageEvent")}} 被触发时，它将会被调用──这意味着，端口收到了一条无法被反序列化的消息。
+
+ +

事件

+ +
+
{{domxref("MessagePort.message_event","message")}}
+
当 MessagePort 对象收到消息时会触发。
+ 也可以通过 {{domxref("MessagePort.onmessage","onmessage")}} 属性使用。
+
{{domxref("MessagePort.messageerror_event","messageerror")}}
+
当 MessagePort 对象收到无法被反序列化的消息时触发。
+ 也可以通过 {{domxref("MessagePort.onmessageerror","onmessageerror")}} 属性使用。
+
+ +

例子

+ +

在下面的例子中，你可以看到一个使用 {{domxref("MessageChannel.MessageChannel","MessageChannel()")}} 构造函数创建出的新 channel. 

+ +

当 IFrame 加载完成后，我们给 {{domxref("MessageChannel.port1")}} 注册了一个 {{domxref("MessagePort.onmessage","onmessage")}} 回调，并且使用 {{domxref("window.postMessage")}} 方法把  {{domxref("MessageChannel.port2")}} 和一条消息一起传给 IFrame.

+ +

当从 IFrame 收到消息时，onMessage 方法会把消息输出到一个段落里。

+ +
var channel = new MessageChannel();
+var output = document.querySelector('.output');
+var iframe = document.querySelector('iframe');
+
+// 等待 iframe 加载
+iframe.addEventListener("load", onLoad);
+
+function onLoad() {
+  // 监听 port1 的事件
+  channel.port1.onmessage = onMessage;
+
+  // 把 port2 传给 iframe
+  iframe.contentWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
+}
+
+
+// 处理 port1 收到的消息
+function onMessage(e) {
+  output.innerHTML = e.data;
+}
+ +

要查看可运行的完整示例，参考我们在 Github 上的 channel messaging basic demo (也可以在线运行).

+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#message-ports','MessagePort')}}{{Spec2('HTML WHATWG')}}No difference from {{SpecName("HTML5 Web Messaging")}}.
{{SpecName('HTML5 Web Messaging', '#message-ports','MessagePort')}}{{Spec2('HTML5 Web Messaging')}}W3C version of the spec
+ +

浏览器兼容性

+ + + +

{{Compat("api.MessagePort")}}

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf