vue项目中iframe嵌套其他项目，iframe父子页面传值

阅读目录

• 一、iframe引入其他项目地址
• 二、父页面向子页面传值
• 三、子页面向父页面传值
• 四、说明

场景：vue后台管理系统项目嵌入其他项目

一、iframe引入其他项目地址

<iframe 
　　ref="newScreen" 
　　@load="sendMessage" 
　　frameborder="0" 
　　:src="url" 
　　width="100%" 
　　height="100%" 
　　id="ysOpenDevice" 
　　allowfullscreen>
</iframe>

二、父页面向子页面传值

由于某些功能需要鉴权，故在原系统登录后获取token传给子页面

父页面绑定onload事件

mounted() {
        let ts = new Date().getTime()
        this.url = 'http://localhost:8090/#/home/xxxx?_'+ts
　　　　 this.iframeWin = this.$refs.newScreen.contentWindow;
    },

方法定义：

sendMessage() {
            this.iframeWin.postMessage({ token: localStorage.getItem('access_token') }, '*')
        },

子页面接收：

created() {
        window.addEventListener('message', this.handleMessage)
    },
methods: {
    handleMessage (event) { 
            const {token} = event.data 
            console.log('token',token) 
        },
}

三、子页面向父页面传值

由于嵌入的项目需要与原项目交互，跳转到对应菜单，故需传值给父页面

子页面传值方法

let data = {
        xxx: '',
        yyy: '',
        zzz: { }
    }
window.parent.postMessage(data, '*')

父页面接收

 mounted() {
        window.addEventListener('message', this.handleMessage)
    },
    methods: {
        handleMessage(event) {
            const { xxx, yyy, zzz} = event.data
        },
    }

四、说明

1.  iframe缓存：在iframe指向的页面地址后缀添加一个时间戳。确保每次加载时，让浏览器知道它是最新的页面，避免缓存
2. 页面卸载前注销监听事件

注意：当使用webpack时，webpack自身会发送postMessage，注意监听message时区分具体是自己发来的message还是webpackOK