H5 postMessage跨文档消息传递
程序员文章站
2024-01-12 19:41:52
...
视频课堂https://edu.csdn.net/course/play/7621
父页面
<!DOCTYPE html>
<html>
<frameset cols="40%,60%">
<frame src="a.html" />
<frame src="b.html" />
</frameset>
</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>
<!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>