实现ifream内外互相交互功能（vue2以及vue3写法）

最新推荐文章于 2024-07-03 09:38:36 发布

Destinynever

最新推荐文章于 2024-07-03 09:38:36 发布

阅读量1.9k

点赞数 12

文章标签： javascript typescript vue.js 前端 html

本文链接：https://blog.csdn.net/qq_57399113/article/details/135244734

版权

1、首先，在创建一个iframe，指向被嵌套的页面

vue3（src就是我们嵌套页面的地址）（上面vue2 下面vue3）

<template>
  <div>
    <div @click="iframeTestLog1Fn">iframeTestLog1Fn</div>
    <div @click="iframeTestLog2Fn">iframeTestLog2Fn</div>
    
    <iframe style="height: 700px; width: 400px" ref="h5Ref" id="h5Ref" src="http://ip地址:8089"></iframe>
  </div>
</template>

<template>
  <div @click="iframeTestLog1Fn">iframeTestLog1Fn</div>
  <div @click="iframeTestLog2Fn">iframeTestLog2Fn</div>

  <iframe style="height: 700px; width: 400px" ref="h5Ref" id="h5Ref" src="http://ip地址:8089"></iframe>
</template>

2、首先实现外层页面调用iframe内部页面方法

a、在iframe内部页面监听message事件

    /**
     * @description  用于外层页面调用ifream中的方法，在window挂载监听事件 如果接收到的关键字匹配调用相对应的方法
     * @author: Destinynever
     * @param {String} message 监听message事件 此处监听的是通过window.postMessage API发送的消息
     * @param {Object} e 这是messageEvent对象 它包含有关触发事件的详细信息
     * @param {String} e.data 接收到的消息数据，可以是字符串、对象或其他可以序列化的数据。
     * @param {String} e.origin 发送消息的窗口的来源，通常是一个 URL。
     * @param {String} e.source 发送消息的窗口对象
     * @date 2023-12-27 09:56:00
     */
    window.addEventListener("message", (event) => {
      if (event.origin === "http://您外层页面的地址:5173") {
        if (event.data === "testLog1") {
          this.testLog1();
        } else if (event.data === "testLog2") {
          this.testLog2();
        }
      }
    });

b、在iframe内部监听定义两个事件

    /**
     * @description 定义方法 提供给外层页面调用
     * @author: Destinynever
     * @date 2023-12-27 10:23:00
     */
    testLog1() {
      console.log("成功调用iframe页面中的testLog1方法");
    },

    testLog2() {
      console.log("成功调用iframe页面中的testLog2方法");
    },

c、在外层页面中发送消息调用iframe内部事件（上面vue2 下面vue3）

    /**
     * @description 用于外层页面调用iframe中页面方法， 如果接收到的关键字匹配调用相对应的方法
     * @author: Destinynever
     * @date 2023-12-27 09:56:00
     */
    iframeTestLog1Fn() {
      this.$refs.h5Ref.contentWindow.postMessage("testLog1", "http://内层页面ip:8089");
    },

    iframeTestLog2Fn() {
      this.$refs.h5Ref.contentWindow.postMessage("testLog2", "http://内层页面ip:8089");
    },

/**
 * @description 用于iframe中页面调用外部方法，在window挂载监听事件 如果接收到的关键字匹配调用相对应的方法
 * @author: Destinynever
 * @date 2023-12-27 09:56:00
 */
const h5Ref = ref();

const iframeTestLog1Fn = () => {
  if (h5Ref.value.contentWindow) {
    h5Ref.value.contentWindow.postMessage("testLog1", "http://内部页面ip:8089");
  }
};

const iframeTestLog2Fn = () => {
  if (h5Ref.value.contentWindow) {
    h5Ref.value.contentWindow.postMessage("testLog2", "http://内部页面ip:8089");
  }
};

3、实现在iframe页面调用外层页面中的方法

a、在外层页面监听message事件（上面vue2 下面vue3）

mounted() {
    let that = this;

    /**
     * @description 用于iframe中页面调用外部方法，在window挂载监听事件 如果接收到的关键字匹配调用相对应的方法
     * @author: Destinynever
     * @param {String} message 监听message事件 此处监听的是通过window.postMessage API发送的消息
     * @param {Object} e 这是messageEvent对象 它包含有关触发事件的详细信息
     * @param {String} e.data 接收到的消息数据，可以是字符串、对象或其他可以序列化的数据。
     * @param {String} e.origin 发送消息的窗口的来源，通常是一个 URL。
     * @param {String} e.source 发送消息的窗口对象
     * @date 2023-12-27 09:56:00
     */
    window.addEventListener("message", (e) => {
      if (e.origin === "http://内层页面ip:8089") {
        if (e.data === "fatherFn1") {
          that.fatherFn1();
        }
        if (e.data === "fatherFn2") {
          that.fatherFn2();
        }
      }
    });
  },

onMounted(() => {
  /**
   * @description 用于iframe中页面调用外部方法，在window挂载监听事件 如果接收到的关键字匹配调用相对应的方法
   * @author: Destinynever
   * @param {String} message 监听message事件 此处监听的是通过window.postMessage API发送的消息
   * @param {Object} e 这是messageEvent对象 它包含有关触发事件的详细信息
   * @param {String} e.data 接收到的消息数据，可以是字符串、对象或其他可以序列化的数据。
   * @param {String} e.origin 发送消息的窗口的来源，通常是一个 URL。
   * @param {String} e.source 发送消息的窗口对象
   * @date 2023-12-27 09:56:00
   */
  window.addEventListener("message", (e) => {
    if (e.origin === "http://内层页面ip:8089") {
      if (e.data === "fatherFn1") {
        fatherFn1();
      }
      if (e.data === "fatherFn2") {
        fatherFn2();
      }
    }
  });
});

b、在外层页面监听定义两个事件（上面vue2 下面vue3）


    /**
     * @description 在外层页面定义方法 提供给ifream页面调用
     * @author: Destinynever
     * @date 2023-12-27 09:56:00
     */
    fatherFn1() {
      console.log("成功调用了父组件中的fatherFn1方法");
    },
    fatherFn2() {
      console.log("成功调用了父组件中的fatherFn2方法");
    },

/**
 * @description 在外层页面定义方法 提供给ifream页面调用
 * @author: Destinynever
 * @date 2023-12-27 09:56:00
 */
const fatherFn1 = () => {
  console.log("成功调用了父组件中的fatherFn1方法");
};
const fatherFn2 = () => {
  console.log("成功调用了父组件中的fatherFn2方法");
};

c、在iframe内部页面中发送消息调用外层页面事件

    /**
     * @description 通过window的postMessage向外层发送消息以调用外层方法
     * @author: Destinynever
     * @date 2023-12-27 10:23:00
     */
    testFatherFn1() {
      window.parent.postMessage("fatherFn1", "http://外层页面ip:5173");
    },
    testFatherFn2() {
      window.parent.postMessage("fatherFn2", "http://外层页面ip:5173");
    },