父页面于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:

评论已关闭。