iframe传参问题

方法一：postmessage

传参数

子向父页面传参

window.parent.postMessage({ // 参数是对象
    DOCK_ID: ship.userData.dockId,
}, '*');

父向子页面传参

写法一 window.frames

// 点击触发传参
// 多个参数传参写法1
window.frames[0].postMessage({ dataa: data.dataa}, '*');
window.frames[0].postMessage({ datab: data.datab}, '*');
// 多个参数传参写法2
window.frames[0].postMessage({ 
	dataa: data.dataa,
	datab: data.datab,
}, '*');

写法二 contentWindow

父组件HTML写上ref 或者id 或者classname

<div>
	<iframe src = 'http://localhost:8080' ref = 'iframeref' id= 'iframeid' class = 'iframeclass'/>
</div>

const iframe = this.$refs.iframeref;
// const iframe = document.getElementById('iframeid');
// const iframe = document.getElementByClassName('iframeclass');

iframe.contentWindow.postMessage({
	id: data.id,
	name: data.name,
}, '*');

接受参数

父子页面监听消息接收都是

 window.addEventListener('message', (event) => {
   console.log(event.data)
 }, false);

方法二 doument.domain 主域相同的场景

父页面访问子页面：

// 通过contentWindow访问子域名挂载在window上的状态管理器
window.iframes[0].contentWindow.vm.$store.state

子页面访问父页面：

// 通过contentWindow访问子域名挂载在window上的状态管理器
window.parent.vm.$store.state