【iframe】基于VUE项目，父子页面互传参数

写在前面的话：

        因为业务需求，现有A、B两个项目，需在A项目中的parent页面中，以iframe的形式，嵌入B项目的child页面。且两者需要互发消息，即互相传参。故有此文。

        另：如果条件允许，建议以MQTT的形式实现上述逻辑，详见

【MQTT】VUE集成MQTT_Francis X的博客-CSDN博客

--泰山不让土壤，故能成其大

---

目录

一、效果演示

二、工具类准备

三、父页面代码

四、子页面代码

---

一、效果演示

二、工具类准备

​

/*******************************************************************************
 * 系统工具类
 *
 * 说明：该工具类，当前已集成如下方法：
 *    1、iframe：发送消息
 *    2、iframe：监听消息
 *
 * 若要查阅相关工具类，建议先折叠方法内部代码
 *
 * @author Francis
 * @since 2022-10-14 18:46
 * @version v1.0
 *******************************************************************************/
/**
 * iframe 跨页面传参：发送消息
 *
 * @param msg 必须是字符串，若为对象，需 stringify
 * @param type 1：父=>子、2：子=>父
 * @param iframeEle 当type为1时需要，获取方式： document.getElementById("iframe_id")
 */
function sendMessage(msg, type, iframeEle) {
  if (type === 1) {
    // 父 => 子
    iframeEle.contentWindow.postMessage(msg, "*");
  } else if (type === 2) {
    // 子 => 父
    window.parent.postMessage(msg, "*");
  }
}

/**
 * 绑定事件监听
 *    主要用于 iframe 父、子页面，接收消息用
 *    【暂时弃用】会多次被调用
 *
 * @param element
 * @param eventName
 * @param eventHandle
 */
function bindEvent(element, eventName, eventHandle) {
  if (element.addEventListener) {
    element.addEventListener(eventName, eventHandle, false);
  } else if (element.attachEvent) {
    element.attachEvent('on' + eventName, eventHandle);
  }
}

// 输出方法
export {
  sendMessage,
  bindEvent
}

[点击并拖拽以移动]
​

三、父页面代码

<template>
  <div class="page-container pageBox">
    <button @click="handleSendMsg">点此发送消息给child页面</button>
    <iframe id="child" style="width: 97%; height: 99%;" :src="src"/>
  </div>
</template>

<script>
  import * as sysUtils from "@/utils/sysUtils";
  import qs from 'qs';

  export default {
    data() {
      return {
        // 引用的子页面的访问路径
        src: "http://127.0.0.1:30013/#/child",
      };
    },
    methods: {

      /**
       * 连接初始化
       */
      handleConnect() {
        let _this = this;
        window.onmessage = function (event) {
          _this.handleEvent(event.data);
        }
      },

      /**
       * 处理回调
       *
       * @param data 子页面传过来的参数
       */
      handleEvent(data) {
        console.log("收到了子页面的消息：", data)
      },

      /**
       * 发送消息
       */
      handleSendMsg() {
        let param = "儿砸，我是你爹";

        sysUtils.sendMessage(param, 1, document.getElementById("child"));
      }
    },
    mounted() {
      this.handleConnect();
    }
  };
</script>

四、子页面代码

<template>
  <div>
    <p>这是child的页面</p>
    <button @click="handleSendMsg">点此发送消息给parent页面</button>
  </div>
</template>

<script>
  import * as sysUtils from "@/utils/sysUtils";
  import qs from 'qs';

  export default {
    data() {
      return {};
    },
    created() {
      this.handleConnect();
    },
    methods: {

      /**
       * 连接初始化
       */
      handleConnect() {
        // 绑定监听事件
        let _this = this;
        window.onmessage = function (event) {
          _this.handleCallback(event.data);
        }
      },

      /**
       * 处理回调
       *
       * @param data 父页面传过来的参数
       */
      async handleCallback(data) {
        console.log("收到了父页面的消息：", data)
      },

      /**
       * 发送消息
       */
      handleSendMsg() {
        let param = "我是儿砸，这是我发来的消息";

        sysUtils.sendMessage(param, 2);
      }

    },
    mounted() {}
  };
</script>