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"); },