无锡 网站制作 大公司,河北高端网站设计,建网360 网站建设,住建部禾建设部是一个网站吗一、 背景
一个项目为vue2#xff0c;一个项目为vue3#xff0c;两个不同的项目实现iframe嵌入#xff0c;并实现通信
二、方案
iframe跨域时#xff0c;iframe组件之间常用的通信#xff0c;主要是H5的possmessage方法
三、案例代码
父页面-vue2#xff08;端口号为…一、 背景
一个项目为vue2一个项目为vue3两个不同的项目实现iframe嵌入并实现通信
二、方案
iframe跨域时iframe组件之间常用的通信主要是H5的possmessage方法
三、案例代码
父页面-vue2端口号为127.0.0.1:8080
templatedivdiv classcontaineriframerefiframeIdidiframeIdsrchttp://127.0.0.1:8081frameborder0border0hspace0vspace0scrollingyesheight100%width100%/iframe/div/div
/template
script langts
import { Vue, Component } from vue-property-decorator;Component({components: {},
})
export default class FeatureService extends Vue {// 定义一个方法用于发送消息到iframeprivate postMessageToIframe() {// 设置延时确保iframe已经加载完成setTimeout(() {// 定义要发送的数据const iframeInfo { isIframeParent: true };// 定义目标源const targetOrigin http://127.0.0.1:8081;// 获取iframe引用const iframe this.$refs.iframeId;// 向iframe发送消息iframe.contentWindow.postMessage(JSON.stringify(iframeInfo),targetOrigin);}, 500);}private mounted() {// 在组件挂载后发送消息到iframethis.postMessageToIframe();window.addEventListener(message, this.handleMessage, false);}private handleMessage(event: MessageEvent) {// 通过origin对消息进行过滤避免遭到XSS攻击if (event.origin http://127.0.0.1:8081) {console.log(子页面传输过来参数, event.data);}}
}
/script
style langless scoped
.container {width: 100%;margin-top: -40px;height: 100vh;overflow: hidden;#iframeId {width: 100%;display: block;}
}
/style
子页面-vue3 (端口号为127.0.0.1:8081)
templatediv!-- 顶部导航 --TopMenu v-if!iframeParentInfo.isIframeParent /div classdemo-sidebar-container demo-full-width!-- 侧边栏 --SiderBar v-if!iframeParentInfo.isIframeParent /!-- 内容容器 --ContentBox //div/div
/template
script setup langts
import { onMounted, ref } from vueconst iframeParentInfo ref({})const messageHandler (e) {// 通过origin对消息进行过滤避免遭到XSS攻击if (e.origin ! http://127.0.0.1:8080) returnif (typeof e.data string) {parseData(e.data)}
}const parseData (data) {try {iframeParentInfo.value JSON.parse(data)console.log(父页面传输过来参数, data)} catch (error) {console.error(解析JSON出错, error)iframeParentInfo.value {}}
}onMounted(() {// 获取 父向 子(iframe) 传递的信息window.addEventListener(message, messageHandler)// 子(iframe)向父传递信息window.parent.postMessage(Hello Parent!, *)
})
/script四、案例效果
