父页面于iframe通信

下面是一个iframe和父页面相互通信的demo,其中使用了一个非常方便的方法postMessage,但是有时候,我们的子页面可能会包含其他业务逻辑,这里面如果也用到了postMessage,就难免会产生冲突,这时候,我们可以使用自定义事件来解决。

关于自定义事件的内容,可以点此查看,相信聪明的你,有能力实现使用自定义事件来进行iframe通信。

  • iframe给父页面发送消息

父页面代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>index</title>
</head>
<body>
<iframe src="./iframe.html"></iframe>
</body>
<script type="text/javascript">
	window.addEventListener('message',function(event){
         //此处执行事件
         console.log(event.data);
	})
</script>
</html>

iframe代码

<!DOCTYPE html>
<html>
<head>
	<title>iframe</title>
</head>
<body>
<button onclick="clickHere();">hahaha</button>
</body>
<script type="text/javascript">
	function clickHere() {
		window.parent.postMessage({"click":true},'*');		
	}
</script>
</html>

  • 父页面给iframe发送消息

父页面代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>index</title>
</head>
<body>
<button onclick="clickHere();">hahaha</button>
<iframe src="./iframe.html" id='iframeId'></iframe>
</body>
<script type="text/javascript">
	function clickHere()
	{
		var frame = document.getElementById('iframeId');
		frame.contentWindow.postMessage({"click":true},'*');
	}
</script>
</html>

iframe代码

<!DOCTYPE html>
<html>
<head>
	<title>iframe</title>
</head>
<body>
</body>
<script type="text/javascript">
window.addEventListener('message',function(event){
    //此处执行事件
    console.log(event.data);
})
</script>
</html>

2 comments:

评论已关闭。