H5 postMessage跨文档消息传递

最新推荐文章于 2021-11-10 15:31:55 发布

teayear

最新推荐文章于 2021-11-10 15:31:55 发布

阅读量612

点赞数

分类专栏：前端技术道本自然

本文链接：https://blog.csdn.net/zhangchen124/article/details/79170269

版权

道本自然同时被 2 个专栏收录

743 篇文章 40 订阅

订阅专栏

前端技术

260 篇文章 18 订阅

订阅专栏

视频课堂https://edu.csdn.net/course/play/7621

父页面

<!DOCTYPE html>
<html>
	<frameset cols="40%,60%">
		<frame src="a.html" />
		<frame src="b.html" />
	</frameset>
</html>

包含的两个子页面a.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.8.3.min.js"></script>
	</head>
	<body>
		<form>
			<input type="text" required="required" autofocus="autofocus" /><br />
			<input type="submit" value="提交" id="btn"/>
		</form>
		<script>
			$("#btn").click(function(){
				var message=$("input[type='text']").val();
				window.parent.frames[1].postMessage(message,'*');
			});
		</script>
	</body>
</html>

包含b.html页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.8.3.min.js"></script>
	</head>
	<body>
		<div id="message">尚未收到消息哦</div>
		<script>
			var msgHandle=function(e){
				$("#message").html("信息："+e.data);
			}
			if(window.addEventListener){
				window.addEventListener("message",msgHandle,false);
			}else if(window.attachEvent){
				window.attachEvent('onmessage',msgHandle);
			}
		</script>
	</body>
</html>