H5 postMessage跨文档消息传递
【摘要】
视频课堂https://edu.csdn.net/course/play/7621
父页面
<!DOCTYPE html><html> <frameset cols="40%,60%"> <frame src="a.html" /> <frame src="b.html" /&...
视频课堂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>
文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。
原文链接：aaaedu.blog.csdn.net/article/details/79170269
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）