1、首先，在創(chuàng)建一個(gè)iframe，指向被嵌套的頁(yè)面

vue3（src就是我們嵌套頁(yè)面的地址）（上面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、首先實(shí)現(xiàn)外層頁(yè)面調(diào)用iframe內(nèi)部頁(yè)面方法

a、在iframe內(nèi)部頁(yè)面監(jiān)聽message事件

    /**
     * @description  用于外層頁(yè)面調(diào)用ifream中的方法，在window掛載監(jiān)聽事件 如果接收到的關(guān)鍵字匹配調(diào)用相對(duì)應(yīng)的方法
     * @author: Destinynever
     * @param {String} message 監(jiān)聽message事件 此處監(jiān)聽的是通過(guò)window.postMessage API發(fā)送的消息
     * @param {Object} e 這是messageEvent對(duì)象 它包含有關(guān)觸發(fā)事件的詳細(xì)信息
     * @param {String} e.data 接收到的消息數(shù)據(jù)，可以是字符串、對(duì)象或其他可以序列化的數(shù)據(jù)。
     * @param {String} e.origin 發(fā)送消息的窗口的來(lái)源，通常是一個(gè) URL。
     * @param {String} e.source 發(fā)送消息的窗口對(duì)象
     * @date 2023-12-27 09:56:00
     */
    window.addEventListener("message", (event) => {
      if (event.origin === "http://您外層頁(yè)面的地址:5173") {
        if (event.data === "testLog1") {
          this.testLog1();
        } else if (event.data === "testLog2") {
          this.testLog2();
        }
      }
    });

b、在iframe內(nèi)部監(jiān)聽定義兩個(gè)事件

    /**
     * @description 定義方法 提供給外層頁(yè)面調(diào)用
     * @author: Destinynever
     * @date 2023-12-27 10:23:00
     */
    testLog1() {
      console.log("成功調(diào)用iframe頁(yè)面中的testLog1方法");
    },

    testLog2() {
      console.log("成功調(diào)用iframe頁(yè)面中的testLog2方法");
    },

c、在外層頁(yè)面中發(fā)送消息調(diào)用iframe內(nèi)部事件（上面vue2 下面vue3）

    /**
     * @description 用于外層頁(yè)面調(diào)用iframe中頁(yè)面方法， 如果接收到的關(guān)鍵字匹配調(diào)用相對(duì)應(yīng)的方法
     * @author: Destinynever
     * @date 2023-12-27 09:56:00
     */
    iframeTestLog1Fn() {
      this.$refs.h5Ref.contentWindow.postMessage("testLog1", "http://內(nèi)層頁(yè)面ip:8089");
    },

    iframeTestLog2Fn() {
      this.$refs.h5Ref.contentWindow.postMessage("testLog2", "http://內(nèi)層頁(yè)面ip:8089");
    },

/**
 * @description 用于iframe中頁(yè)面調(diào)用外部方法，在window掛載監(jiān)聽事件 如果接收到的關(guān)鍵字匹配調(diào)用相對(duì)應(yīng)的方法
 * @author: Destinynever
 * @date 2023-12-27 09:56:00
 */
const h5Ref = ref();

const iframeTestLog1Fn = () => {
  if (h5Ref.value.contentWindow) {
    h5Ref.value.contentWindow.postMessage("testLog1", "http://內(nèi)部頁(yè)面ip:8089");
  }
};

const iframeTestLog2Fn = () => {
  if (h5Ref.value.contentWindow) {
    h5Ref.value.contentWindow.postMessage("testLog2", "http://內(nèi)部頁(yè)面ip:8089");
  }
};

3、實(shí)現(xiàn)在iframe頁(yè)面調(diào)用外層頁(yè)面中的方法

?a、在外層頁(yè)面監(jiān)聽message事件（上面vue2 下面vue3）

mounted() {
    let that = this;

    /**
     * @description 用于iframe中頁(yè)面調(diào)用外部方法，在window掛載監(jiān)聽事件 如果接收到的關(guān)鍵字匹配調(diào)用相對(duì)應(yīng)的方法
     * @author: Destinynever
     * @param {String} message 監(jiān)聽message事件 此處監(jiān)聽的是通過(guò)window.postMessage API發(fā)送的消息
     * @param {Object} e 這是messageEvent對(duì)象 它包含有關(guān)觸發(fā)事件的詳細(xì)信息
     * @param {String} e.data 接收到的消息數(shù)據(jù)，可以是字符串、對(duì)象或其他可以序列化的數(shù)據(jù)。
     * @param {String} e.origin 發(fā)送消息的窗口的來(lái)源，通常是一個(gè) URL。
     * @param {String} e.source 發(fā)送消息的窗口對(duì)象
     * @date 2023-12-27 09:56:00
     */
    window.addEventListener("message", (e) => {
      if (e.origin === "http://內(nèi)層頁(yè)面ip:8089") {
        if (e.data === "fatherFn1") {
          that.fatherFn1();
        }
        if (e.data === "fatherFn2") {
          that.fatherFn2();
        }
      }
    });
  },

onMounted(() => {
  /**
   * @description 用于iframe中頁(yè)面調(diào)用外部方法，在window掛載監(jiān)聽事件 如果接收到的關(guān)鍵字匹配調(diào)用相對(duì)應(yīng)的方法
   * @author: Destinynever
   * @param {String} message 監(jiān)聽message事件 此處監(jiān)聽的是通過(guò)window.postMessage API發(fā)送的消息
   * @param {Object} e 這是messageEvent對(duì)象 它包含有關(guān)觸發(fā)事件的詳細(xì)信息
   * @param {String} e.data 接收到的消息數(shù)據(jù)，可以是字符串、對(duì)象或其他可以序列化的數(shù)據(jù)。
   * @param {String} e.origin 發(fā)送消息的窗口的來(lái)源，通常是一個(gè) URL。
   * @param {String} e.source 發(fā)送消息的窗口對(duì)象
   * @date 2023-12-27 09:56:00
   */
  window.addEventListener("message", (e) => {
    if (e.origin === "http://內(nèi)層頁(yè)面ip:8089") {
      if (e.data === "fatherFn1") {
        fatherFn1();
      }
      if (e.data === "fatherFn2") {
        fatherFn2();
      }
    }
  });
});

b、在外層頁(yè)面監(jiān)聽定義兩個(gè)事件（上面vue2 下面vue3）

    /**
     * @description 在外層頁(yè)面定義方法 提供給ifream頁(yè)面調(diào)用
     * @author: Destinynever
     * @date 2023-12-27 09:56:00
     */
    fatherFn1() {
      console.log("成功調(diào)用了父組件中的fatherFn1方法");
    },
    fatherFn2() {
      console.log("成功調(diào)用了父組件中的fatherFn2方法");
    },

/**
 * @description 在外層頁(yè)面定義方法 提供給ifream頁(yè)面調(diào)用
 * @author: Destinynever
 * @date 2023-12-27 09:56:00
 */
const fatherFn1 = () => {
  console.log("成功調(diào)用了父組件中的fatherFn1方法");
};
const fatherFn2 = () => {
  console.log("成功調(diào)用了父組件中的fatherFn2方法");
};

c、在iframe內(nèi)部頁(yè)面中發(fā)送消息調(diào)用外層頁(yè)面事件文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-854490.html

    /**
     * @description 通過(guò)window的postMessage向外層發(fā)送消息以調(diào)用外層方法
     * @author: Destinynever
     * @date 2023-12-27 10:23:00
     */
    testFatherFn1() {
      window.parent.postMessage("fatherFn1", "http://外層頁(yè)面ip:5173");
    },
    testFatherFn2() {
      window.parent.postMessage("fatherFn2", "http://外層頁(yè)面ip:5173");
    },

到了這里，關(guān)于實(shí)現(xiàn)ifream內(nèi)外互相交互功能（vue2以及vue3寫法）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！