vue iframe内嵌网页交互

在 Vue 中嵌入 iframe 可以通过使用 `<iframe>` 标签来实现。然而，由于 iframe 内的网页与主页不在同一个域，因此直接访问 iframe 内部的 DOM 元素是不允许的。为了实现 iframe 内的网页与 Vue 组件的交互，可以使用 iframe 的 postMessage 方法，通过跨域消息传递来实现。

以下是一个示例代码：

<template>
  <div>
    <iframe
      ref="iframe"
      src="https://example.com"
      @load="onIframeLoad"
    ></iframe>
  </div>
</template>

<script>
export default {
  methods: {
    onIframeLoad() {
      const iframe = this.$refs.iframe;
      const iframeWindow = iframe.contentWindow;

      // 监听来自 iframe 内部的消息
      window.addEventListener('message', (event) => {
        if (event.source === iframeWindow) {
          // 处理来自 iframe 内部的消息
          console.log(event.data);
        }
      });

      // 向 iframe 内部发送消息
      iframeWindow.postMessage('hello from Vue', 'https://example.com');
    },
  },
};
</script>

在这个示例中，我们在 iframe 的加载事件中获取了 iframe 的 window 对象，然后通过监听 window 对象的 message 事件来接收来自 iframe 内部的消息。我们还可以使用 postMessage 方法向 iframe 内部发送消息。需要注意的是，postMessage 方法的第二个参数必须是 iframe 内网页的地址，以确保安全。