iframe事件穿透到父窗口_使用 postMessage 解决 iframe 跨域通信

在使用 iframe 嵌入不同域名的页面时，由于浏览器的同源策略的限制，iframe 内部的页面无法直接与父页面进行通信。这时可以使用 HTML5 的 postMessage 方法来实现跨域通信。

postMessage 方法可以在不同窗口之间传递消息，包括不同域名的窗口。它的使用方法如下：

// 发送消息
window.parent.postMessage('message', 'http://example.com');

// 接收消息
window.addEventListener('message', function(event) {
  if (event.origin === 'http://example.com') {
    console.log(event.data);
  }
}, false);

在上面的例子中，如果当前页面是通过 iframe 嵌入在 http://example.com 页面中的，那么可以通过 `window.parent` 访问到父页面，并使用 postMessage 方法发送消息给父页面。父页面可以通过监听 message 事件来接收消息，并根据消息来源进行处理。

需要注意的是，postMessage 方法允许向任何窗口发送消息，因此需要在接收消息时对消息来源进行验证，以确保安全性。同时，postMessage 方法只能传递字符串类型的数据，因此需要在发送复杂数据时进行序列化和反序列化操作。

相关问题

postMessage解决iframe跨域通信

在 Web 开发中，当网页中包含来自不同域名的 iframe（内嵌框架）时，由于浏览器的同源策略限制，iframe 之间的直接通信会受到限制。为了实现 iframe 之间的跨域通信，可以使用 postMessage 方法。

postMessage 是一种 HTML5 提供的跨文档消息传递机制，它允许在不同窗口或 iframe 之间发送消息。通过 postMessage，可以在不同域名之间进行安全的双向通信。

使用 postMessage 进行跨域通信的步骤如下：

1. 在发送消息的页面（发送方）中，使用 JavaScript 调用 postMessage 方法发送消息。该方法接受两个参数：要发送的消息和接收消息的目标窗口的源（origin）。目标窗口的源可以是具体的域名、协议和端口号，或者是通配符 "*" 表示任意源。

var targetWindow = document.getElementById('target-frame').contentWindow;
targetWindow.postMessage('Hello', 'https://target-domain.com');

2. 在接收消息的页面（接收方）中，监听 message 事件，通过 event.data 获取接收到的消息。在事件处理程序中可以对消息进行处理。

window.addEventListener('message', function(event) {
  if (event.origin === 'https://source-domain.com') {
    console.log('Received message: ' + event.data);
  }
});

通过这种方式，发送方和接收方可以进行跨域通信，并且可以在消息中传递复杂的数据结构。但要注意，为了确保安全性，应该在接收方对来自不同源的消息进行验证，以防止恶意代码的攻击。

需要注意的是，postMessage 方法只能在现代浏览器中使用，兼容性可能会有所差异。此外，在使用 postMessage 进行跨域通信时，也需要确保目标窗口（接收方）支持 postMessage 方法。

如何在vue中使用 iframe + postMessage 实现跨域通信 还避免iframe卡顿

在Vue中使用iframe + postMessage实现跨域通信，可以参考以下步骤：

1. 在Vue中使用iframe元素来展示需要跨域通信的页面，例如：

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

2. 在Vue组件的mounted钩子中，注册监听iframe的message事件，接收消息并处理：

mounted() {
  window.addEventListener("message", this.handleMessage, false);
},
methods: {
  handleMessage(event) {
    // 处理接收到的消息
  }
}

3. 在iframe页面中，使用父窗口的postMessage方法向父窗口发送消息：

window.parent.postMessage({ data: "hello" }, "*");

4. 在Vue组件中，使用iframe的contentWindow.postMessage方法向子窗口发送消息：

this.$refs.iframe.contentWindow.postMessage({ data: "hello" }, "*");

为了避免iframe卡顿，可以考虑使用懒加载的方式加载iframe元素，即在需要展示iframe的时候再去加载它，而不是在组件被挂载时就加载。可以使用Vue的异步组件来实现懒加载：

<template>
  <div>
    <component :is="iframeComponent"></component>
  </div>
</template>
<script>
export default {
  data() {
    return {
      iframeComponent: null
    }
  },
  mounted() {
    // 在需要展示iframe的时候加载组件
    this.iframeComponent = () => import('./Iframe.vue')
  }
}
</script>

在Iframe.vue组件中，再展示实际的iframe元素，并注册message事件监听器。这样可以确保iframe元素只在需要的时候加载，避免卡顿问题。