vue项目通过Iframe引入本地html页面并实现通信

1.关于路径的问题

需要在src同级的public文件夹中创建文件夹static文件夹将需要通信的html文件放到里面

完成此步骤之后可以将iframe路径设置为 /static/demo.html

 <iframe id="myIframe" src="/static/demo.html" frameborder="0"></iframe>

2.页面之间的通信问题

2.1 vue组件向html发送信息

vue中控制发送消息的代码

sendMsg2Html(){
    let data = '传递的信息'
    const iframe = document.getElementById("myIframe")
    iframe.contentWindow.postMessage(data,"*")
}

html中控制接收信息的代码

window.onload = function(){
    window.addEventListener('message',(event)=>{
        console.log("event---",event.data)
    })
}

2.2 html组件向vue发送信息

html中控制发送信息的代码

function setMessage2Vue(){
    let data = '传递的信息' 
    window.parent.postMessage(data,"*")
}

vue中控制接收消息的代码(dom加载时执行)

mounted(){
    window.addEventListener('message',(event)=>{
        console.log("event---",event.data)
    })
}