Vue iframe之间通讯

前端李小白

于 2021-08-10 17:47:04 发布

阅读量3.7k

点赞数

分类专栏： vue iframe 文章标签： vue iframe

本文链接：https://blog.youkuaiyun.com/qq_42268364/article/details/119575394

版权

本文介绍了如何在Vue应用中利用iframe的onload事件和postMessage方法实现与子应用的数据交互。主应用在iframe加载完成后发送消息，子应用在mounted阶段监听onmessage事件来接收和响应这些消息。同时，子应用同样可以通过postMessage向主应用发送消息，主应用的接收方式与子应用类似。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、主应用通过在iframe的onload事件中，使用postMessage向子应用进行数据交互
2、子应用在mounted阶段通过监听onmessage事件进行接收事件

主应用

<template>
  <div v-tip="loading" :style="'height:' + (isQiankun ? qiankunHeight : height)">
    <iframe
      ref="iframe"
      :src="src"
      frameborder="no"
      style="width: 100%;height: 100%"
      scrolling="auto"
      @load="loaded"
    />
  </div>
</template>
<script>
// import Cookies from 'js-cookie'
export default {
   
  props: {
   
    src: {
   
      type: String,
      required: true
    }
  },
  data() {
   
    return {
   
      height: document.documentElement.clientHeight - 90 + 'px;',

最低0.47元/天解锁文章