Custom Elements 的跨文档通讯-JavaScript中文网-JavaScript教程资源分享门户

Custom Elements 是 Web Components 的核心技术之一，它允许我们创建自定义的 HTML 元素，并在页面中使用它们。但是，当我们需要在不同的文档中使用这些自定义元素时，我们需要一种跨文档通讯的方式来实现数据的共享和交互。本文将介绍 Custom Elements 的跨文档通讯的实现方式，并提供示例代码以供参考。

为什么需要跨文档通讯？

在 Web 应用程序中，我们通常会将不同的功能拆分为不同的组件，每个组件都可以是一个自定义元素。这些自定义元素可能会分布在不同的文档（比如 iframe）中，需要在它们之间进行通讯以实现某些功能，比如：

父窗口和子窗口之间的通讯
不同 iframe 之间的通讯
Web Worker 和主线程之间的通讯

因此，跨文档通讯是 Web 应用程序中非常常见的需求。

如何实现跨文档通讯？

在 Custom Elements 中，我们可以使用两种方式来实现跨文档通讯：CustomEvent 和 postMessage。

CustomEvent

CustomEvent 是 DOM 事件的一种，它允许我们创建自定义的事件类型，并在元素上触发这些事件。我们可以在事件的 detail 属性中传递数据，从而实现元素之间的通讯。

示例代码：

// javascriptcn.com 代码示例
// 定义 CustomEvent
const myEvent = new CustomEvent('my-event', {
  detail: {
    message: 'Hello from CustomElement!'
  }
});

// 触发 CustomEvent
this.dispatchEvent(myEvent);

// 监听 CustomEvent
document.addEventListener('my-event', (event) => {
  console.log(event.detail.message);
});

在这个示例中，我们定义了一个名为 my-event 的 CustomEvent，并在自定义元素中触发了这个事件，并传递了一个包含消息的对象。在文档中监听这个事件，就可以获取到传递的消息了。

postMessage

postMessage 是 HTML5 中的一种 API，它允许我们在不同的文档之间传递数据。我们可以使用 postMessage 来实现 Custom Elements 之间的跨文档通讯。

示例代码：

// javascriptcn.com 代码示例
// 发送 postMessage
const targetWindow = window.parent; // 或者其他文档的 window 对象
const message = {
  type: 'my-message',
  data: {
    message: 'Hello from CustomElement!'
  }
};
targetWindow.postMessage(message, '*'); // * 表示可以向任意文档发送消息

// 监听 postMessage
window.addEventListener('message', (event) => {
  if (event.data.type === 'my-message') {
    console.log(event.data.data.message);
  }
});

在这个示例中，我们向父窗口发送了一个包含消息的对象，并在文档中监听了 message 事件来接收消息。注意，我们需要对接收到的消息进行类型和来源的检查，以确保安全性。

总结

Custom Elements 的跨文档通讯是 Web 应用程序中常见的需求之一，我们可以使用 CustomEvent 和 postMessage 来实现这个功能。在使用这些方式时，我们需要注意安全性和兼容性，以确保应用程序的稳定性和安全性。

参考代码：

// javascriptcn.com 代码示例
<!-- 父窗口中的页面 -->
<iframe id="my-iframe" src="child.html"></iframe>

<script>
const iframe = document.querySelector('#my-iframe');
const message = {
  type: 'my-message',
  data: {
    message: 'Hello from parent window!'
  }
};
iframe.contentWindow.postMessage(message, '*');

window.addEventListener('message', (event) => {
  if (event.origin !== 'http://localhost:3000') {
    return;
  }
  if (event.data.type === 'my-message') {
    console.log(event.data.data.message);
  }
});
</script>

// javascriptcn.com 代码示例
<!-- 子窗口（child.html）中的页面 -->
<script>
window.addEventListener('message', (event) => {
  if (event.origin !== 'http://localhost:3000') {
    return;
  }
  if (event.data.type === 'my-message') {
    console.log(event.data.data.message);
    const message = {
      type: 'my-reply',
      data: {
        message: 'Hello from child window!'
      }
    };
    event.source.postMessage(message, event.origin);
  }
});
</script>

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656d58e2d2f5e1655d5a24f6