iframe利用postMessage通讯

最新推荐文章于 2024-12-15 12:30:34 发布

前端kit

最新推荐文章于 2024-12-15 12:30:34 发布

阅读量451

点赞数 1

分类专栏： Js

本文链接：https://blog.csdn.net/qq_20069429/article/details/94568298

版权

Js 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

父级

iframe1
<iframe src="http://192.168.2.124:5500/开发测试/iframe测试/iframe_通讯2.html" id="myIFrame"></iframe>
<script type="text/javascript">
	//监听消息反馈
	window.addEventListener('message',function(event) {
		console.log('iframe1 ev',event.data);
	},false);
	
	 window.onload=function(){
		 window.frames[0].postMessage('getcolor','http://192.168.2.124:5500');
	 }
</script>

子级

iframe2
<script type="text/javascript">
	//发送消息
	setInterval(function () {
		var message = 'Hello!  The time is: ' + (new Date().getTime());
		console.log('iframe 2 ');
		//send the message and target URI
		window.top.postMessage(message, 'http://192.168.2.124:8848');
	}, 4000);

	window.addEventListener('message', function (event) {
		console.log('iframe2 ev', event.data);
	}, false);
</script>