记录一次vue 项目中使用 iframe 嵌套其他项目
<template>
<div class="hello" style="height:100%">
<div class="hader-iframe">
<div :class="logClass">
<img src="../assets/logo.png" alt />
<p>管理系统</p>
</div>
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<el-menu-item index="http://autel-cloud-web-admin-v2-dev.com/system/user">处理中心</el-menu-item>
<el-menu-item index="http://autel-cloud-web-admin-dev.com/home">我的工作台</el-menu-item>
<el-menu-item index="http://management-frontend-dev.com/deviceManageHome">消息中心</el-menu-item>
<el-menu-item index="4">订单管理</el-menu-item>
</el-menu>
</div>
<div style="height:calc(100% - 61px)">
<iframe
:src="url"
height="100%"
width="100%"
name="demo"
frameborder="0"
scrolling="auto"
sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts"
></iframe>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeIndex2: ‘http://autel-cloud-web-admin-v2-dev.com/system/user’,
url: ‘http://autel-cloud-web-admin-v2-dev.com/system/user’,
logClass: ‘left’
}
},
created() {},
mounted() {
window.addEventListener(
‘message’,
e => {
console.log(e)
if (typeof e.data === ‘boolean’ && e.data) {
this.logClass = ‘left decrease-width’
} else {
this.logClass = ‘left’
}
},
false
)
},
methods: {
handleSelect(key) {
this.url = key
}
}
}
</script>
父级页面向子页面传参
window.frames[0].postMessage(data,'http://test.com:port');//第二个参数为子页面地址
//子页面接参
window.addEventListener('message',function(e){
if(e.source != window.parent) return;
console.log(e.data);
},false);
自己页面向父级页面传参
window.parent.postMessage(this.isActive, '*') //postMessage 第一个参数表示传递参数， 第二个参数表示域，*是所有域都能接受这个参数
//父页面接受参数
window.addEventListener(
'message',
e => {
console.log(e)
if (typeof e.data === 'boolean' && e.data) {
this.logClass = 'left decrease-width'
} else {
this.logClass = 'left'
}
},
false
)
版权声明：本文为SuperBrother原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。