开发项目时,需要使用iframe嵌套另外一个项目,两者之间还需要进行互相传值,,,,,,啊啊啊啊不想搞
iframe给src的网页发送消息
使用iframe嵌套,http://192.152.123.2:5237/imd为瞎写的地址,不用网页输入试验嗯,换成自己的就行,ref是重点,别忘了嗯。
<iframe
ref="iframeContent"
width="100%"
height="100%"
frameborder="0"
style="border:0"
class="iframeclass"
src="http://192.152.123.2:5237/imd"
>
</iframe>
传值了传值了,确保iframe加载完成,所以加一个监听嗯。JSON.stringify(this.options)我自己的值,我给转了,换成你自己的就行。敲重点了记住了:*号这里换成你自己的src的地址,这样只有这个地址可以收到发送的信息,其他的地址收不到,*表示其他的窗口也能收到。
this.$refs.iframeContent.addEventListener('load', () => {
console.log('iframe加载完成');
this.$refs.iframeContent.contentWindow.postMessage(JSON.stringify(this.options), '*') })
接收了终于到接收数据了,啦啦啦啦
window.addEventListener('message', function (event) {
console.log(event.data)
}
src的网页给iframe的网页发送消息
window.parent.postMessage({
type: 'iframeClick',
data: {
text: ‘发送的消息’
}
}, '*'); //*号也是可以换成对方的地址
iframe网页接收消息
window.addEventListener('message', function(event) {
if (event.data.type === 'iframeClick') {
console.log(event.data);
}
});