不同域下的iframe实现父子窗口通信

如果父页面与子页面的协议、端口号、域名一致,则可以通过获取元素的方式进行通信(详见:https://blog.csdn.net/hhf235678/article/details/103894827),但某一个不一致时,则需要通过window.postMessage()方式进行通信

父页面:

	<div>
		<iframe  :src="xxx"  id="parentPage"></iframe>
	</div>
	<script>
		// 获取子页面传来的值
		window.addEventListener('message', function(e){
     
			console.log('得到的子元素数据', e.data);
		}, false);

		// 给子页面传值
		var ifrmae = document.getElementById('parentPage');
		iframe.contentWindow.postMessage(parentData, '*');
	</script>

子页面

<div id="childPage"></div>
<script>
	// 给父元素传递数据
	window.parent.postMessage(childData, '*');
	// 获取父元素传递的数据
	window.addEventListener('message', function(e){
     
		console.log('得到的父元素数据', e.data);
	}, false);
</script>

你可能感兴趣的:(js,javascript)