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/messagechannel/index.html | 87 ++++++++++++ .../api/messagechannel/messagechannel/index.html | 79 +++++++++++ .../zh-cn/web/api/messagechannel/port1/index.html | 148 +++++++++++++++++++++ .../zh-cn/web/api/messagechannel/port2/index.html | 144 ++++++++++++++++++++ 4 files changed, 458 insertions(+) create mode 100644 files/zh-cn/web/api/messagechannel/index.html create mode 100644 files/zh-cn/web/api/messagechannel/messagechannel/index.html create mode 100644 files/zh-cn/web/api/messagechannel/port1/index.html create mode 100644 files/zh-cn/web/api/messagechannel/port2/index.html (limited to 'files/zh-cn/web/api/messagechannel') diff --git a/files/zh-cn/web/api/messagechannel/index.html b/files/zh-cn/web/api/messagechannel/index.html new file mode 100644 index 0000000000..47cb52146f --- /dev/null +++ b/files/zh-cn/web/api/messagechannel/index.html @@ -0,0 +1,87 @@ +--- +title: MessageChannel +slug: Web/API/MessageChannel +tags: + - API + - Channel Messaging API + - Interface + - MessageChannel + - Reference + - web messaging +translation_of: Web/API/MessageChannel +--- +

{{APIRef("HTML DOM")}}

+ +

Channel Messaging API的MessageChannel 接口允许我们创建一个新的消息通道，并通过它的两个{{domxref("MessagePort")}} 属性发送数据。

+ +

{{AvailableInWorkers}}

+ +

属性

+ +
+
{{domxref("MessageChannel.port1")}} {{readonlyInline}}
+
返回channel的port1。
+
{{domxref("MessageChannel.port2")}} {{readonlyInline}}
+
返回channel的port2。
+
+ +

构造函数

+ +
+
{{domxref("MessageChannel.MessageChannel", "MessageChannel()")}}
+
+

返回一个带有两个MessagePort属性的MessageChannel新对象。

+
+
+ +

示例

+ +

在以下代码块中，您可以看到使用MessageChannel构造函数实例化了一个channel对象。当iframe加载完毕，我们使用MessagePort.postMessage方法把一条消息和MessageChannel.port2传递给iframe。handleMessage处理程序将会从iframe中（使用MessagePort.onmessage监听事件）接收到信息，将数据其放入innerHTML中。

+ +
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;
+}
+ +

一个完整的运行示例，可以在Github上查看 channel messaging basic demo  (run it live too).

+ +

Specifications/规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#message-channels','MessageChannel')}}{{Spec2('HTML WHATWG')}}No difference from {{SpecName("HTML5 Web Messaging")}}.
+ +

浏览器兼容性

+ +
{{Compat("api.MessageChannel")}}
+ +
+ +

参见

+ + diff --git a/files/zh-cn/web/api/messagechannel/messagechannel/index.html b/files/zh-cn/web/api/messagechannel/messagechannel/index.html new file mode 100644 index 0000000000..36a4ff6043 --- /dev/null +++ b/files/zh-cn/web/api/messagechannel/messagechannel/index.html @@ -0,0 +1,79 @@ +--- +title: MessageChannel() +slug: Web/API/MessageChannel/MessageChannel +tags: + - API + - Channel messaging + - Constructor + - MessageChannel + - 参考 + - 构造函数 +translation_of: Web/API/MessageChannel/MessageChannel +--- +

{{APIRef("HTML DOM")}}

+ +

{{domxref("MessageChannel")}} 接口的 MessageChannel() 构造函数返回一个新的 {{domxref("MessageChannel")}} 对象，返回的对象中包含两个 {{domxref("MessagePort")}} 对象。

+ +

{{AvailableInWorkers}}

+ +

语法

+ +
var channel = new MessageChannel();
+ +

返回值

+ +

一个新创建的 {{domxref("MessageChannel")}} 对象。

+ +

例子

+ +

在下面的代码块中，你会看到一个由 {{domxref("MessageChannel()", "MessageChannel.MessageChannel")}}  构造函数创建的新 Channel. 当 IFrame 被加载后，我们使用 {{domxref("MessagePort.postMessage")}} 把 port2 和一条消息一起发送给 IFrame. 然后 handleMessage 回调响应 IFrame 发回的消息（使用 {{domxref("MessagePort.onmessage")}}），并把它渲染到页面段落中。{{domxref("MessageChannel.port1")}} 用来监听，当消息到达时，会进行处理。

+ +
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;
+}
+ +

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

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'web-messaging.html#dom-messagechannel', 'MessageChannel()')}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ +
+ + +

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

+
+ +

参见

+ + diff --git a/files/zh-cn/web/api/messagechannel/port1/index.html b/files/zh-cn/web/api/messagechannel/port1/index.html new file mode 100644 index 0000000000..810f29d780 --- /dev/null +++ b/files/zh-cn/web/api/messagechannel/port1/index.html @@ -0,0 +1,148 @@ +--- +title: MessageChannel.port1 +slug: Web/API/MessageChannel/port1 +translation_of: Web/API/MessageChannel/port1 +--- +
{{APIRef("HTML DOM")}}
+ +

{{domxref("MessageChannel")}} 的只读属性 port1 返回消息通道的第一个端口, 此端口连接到源上下文通道。

+ +

{{AvailableInWorkers}}

+ +

语法

+ +
channel.port1;
+ +

Value

+ +

一个 {{domxref("MessagePort")}} 对象, 通道的第一个端口，此端口连接到源上下文通道。

+ +

示例

+ +

在以下代码块中，您可以看到使用 {{domxref("MessageChannel.MessageChannel", "MessageChannel()")}}构造函数创建的新通道。当{{HTMLElement("iframe")}}加载完毕，我们使用{{domxref("MessagePort.postMessage")}}方法把一条消息和{{domxref("MessageChannel.port2")}}传递给{{HTMLElement("iframe")}}。handleMessage处理程序将会从<iframe>中（使用{{domxref("MessagePort.onmessage")}}监听事件）接收到信息，将数据其放入一个段落。handleMessage 方法关联到 port1用于监听收到的消息。

+ +
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;
+}
+
+ +

一个完整的运行示例，可以在Github上查看 channel messaging basic demo  (run it live too).

+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', '#dom-messagechannel-port1','port1')}}{{Spec2('HTML WHATWG')}}No difference from {{SpecName("HTML5 Web Messaging")}}.
{{SpecName('HTML5 Web Messaging', '#dom-messagechannel-port1','port1')}}{{Spec2('HTML5 Web Messaging')}}W3C version of the spec
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4{{CompatVersionUnknown}}{{CompatGeckoDesktop(41)}}10.010.65
Available in workers{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(41)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.44{{CompatVersionUnknown}}{{CompatGeckoMobile(41)}}{{CompatVersionUnknown}}10.011.55.1
Available in workers{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(41)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

参考

+ + diff --git a/files/zh-cn/web/api/messagechannel/port2/index.html b/files/zh-cn/web/api/messagechannel/port2/index.html new file mode 100644 index 0000000000..7f4a3b7079 --- /dev/null +++ b/files/zh-cn/web/api/messagechannel/port2/index.html @@ -0,0 +1,144 @@ +--- +title: MessageChannel.port2 +slug: Web/API/MessageChannel/port2 +translation_of: Web/API/MessageChannel/port2 +--- +

{{APIRef("HTML DOM")}}

+ +

{{domxref("MessageChannel")}}接口的 port2 是一个只读属性，返回消息通道的第二个端口，该端口连接到通道另一端的上下文，也就是发送消息时的目的地。

+ +

{{AvailableInWorkers}}

+ +

语法

+ +
channel.port2;
+ +

值

+ +

表示通道第二个端口的一个{{domxref("MessagePort")}}对象，该端口附加到通道另一端的上下文。

+ +

 

+ +

示例

+ +

如下代码所示，通过{{domxref("MessageChannel()", "MessageChannel.MessageChannel")}}构造函数创建了一个新的通道。当IFrame加载完毕，我们使用{{domxref("MessagePort.postMessage")}}将一条消息以及port2传递给IFrame。handleMessage处理程序响应从IFrame发回的消息（使用 {{domxref("MessagePort.onmessage")}}），将其放入段落中。{{domxref("MessageChannel.port1")}}已经监听，以检测消息何时到达。

+ +
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;
+}
+ +

有关完整的运行示例，请参阅我们在GitHub的 channel messaging basic demo  (run it live too).

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'web-messaging.html#dom-messagechannel-port2', 'port2')}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4{{CompatVersionUnknown}}{{CompatGeckoDesktop(41)}}10.010.65
Available in workers{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(41)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.44{{CompatVersionUnknown}}{{CompatGeckoMobile(41)}}{{CompatVersionUnknown}}10.011.55.1
Available in workers{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(41)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

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