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 方法只能传递字符串类型的数据，因此需要在发送复杂数据时进行序列化和反序列化操作。

相关问题

iframe跨域调用父页面方法_解决跨域的四种方式

当我们在一个网页中使用iframe标签引入另一个网页时，如果这两个网页的域名不同，就会出现跨域问题。此时，如果需要在iframe中调用父页面的方法，就需要解决跨域问题。

解决跨域问题的四种方式：

1. JSONP

JSONP是一种通过动态创建script标签的方式，从另一个域名下获取数据并进行回调的方法。JSONP只支持GET请求，而且只能获得JSON格式的数据。

2. CORS

CORS是一种浏览器的安全策略，允许网页从不同的域名访问服务器的资源。在服务器端设置CORS响应头，可以允许跨域访问。但是CORS只支持现代浏览器，IE8及以下版本不支持。

3. 代理

代理是指在同一个域名下，通过服务器端转发请求的方式实现跨域访问。当客户端发起请求时，先将请求发送给同域名下的某个接口，接口再将请求转发给另一个域名下的接口，最后将数据返回给客户端。

4. postMessage

postMessage是HTML5中新增的API，可以在不同的窗口或iframe之间传递数据。通过在父页面和iframe页面分别注册message事件，并在事件处理函数中进行数据传递，就可以实现跨域通信。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元素只在需要的时候加载，避免卡顿问题。