H5 postMessage跨文档消息传递
生活随笔
收集整理的這篇文章主要介紹了
H5 postMessage跨文档消息传递
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
視頻課堂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>總結
以上是生活随笔為你收集整理的H5 postMessage跨文档消息传递的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 设置SpringMVC默认首页启动
- 下一篇： 电子商务实战课程-张晨光-专题视频课程