今天小编给大家分享的是HTML中postmessage的用法介绍,相信很多人都不太了解,为了让大家更加了解HTML中postmessage的用法,所以给大家总结了以下内容,一起往下看吧。一定会有所收获的哦。
postmessage用法
关于html5的PostMessage的用法总结
大家都知道,网页之间传递数据可以使用ajax请求来完成,今天我总结下我学习的postMessage是如何完成跨页面请求数据的呢?首先,postMessage是html5新增的一个解决跨域的一个方法。那他是如何使用的呢?这里我把一个案例分享出来把。
看下面的代码:
test.html
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> </head> <body> </body> <script> onmessage=function(e){ e=e||event; document.write("my name is ",e.data); document.body.style.background = 'red'; }; </script> </html>
1.html
<!DOCTYPE html> <html> <head> <title>window.postMessage</title> <meta charset="utf-8"/> <h2>test接收区</h2> </head> <body> </body> <iframe id="f" src="http://localhost:8080/chajian/test.html"></iframe> <script> var f=document.getElementById("f"); //给框架网页发送消息,然后收到之后,会传送过来。 f.οnlοad=function(){ setTimeout(function(){ f.contentWindow.postMessage("谢霆锋","http://localhost:8080"); },3000) } </script> </html>
首先,它的原理是这样的。我就拿我的案例代码来说吧。
1.html里面镶嵌了一个iframe网页 框架,他就是靠这里传输数据的,等1.html加载完成之后,他会主动发给test.html 谢霆锋,然后test.html收到之后,它里面有接收消息的处理函数,他收到消息之后,立马 ,给网页返回 一段字符串,然后把自己的背景改成红色。这样就达到了网页互动的效果,可惜的是,万恶的ie6.7不支持,兼容度不高。
注意:postMessage的写法,postMessage之前写的是你要通信的window对象(也就是你要向谁通信),此时的window.parent的权限仅限于此,不能在像同域似的,进行获取父级的DOM元素,否则浏览器会报错,提示你不能进行跨域访问,我们再来看postMessage中所接收的参数,第一个参数就是你要像另外一个窗口传递的数据(只能传字符串类型),第二个参数表示目标窗口的源,协议+主机+端口号,是为了安全考虑,如果设置为“*”,则表示可以传递给任意窗口。
上面是单页面交互的,下面给个双页面交互的。其实都是一样的,不过就是 两个页面都写了监听 发送事件。
test.html
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> </head> <body> <h2 class="header">page B</h2> <input type="text" id="inp" value="我想你"> <button οnclick="send()">send</button> </body> <script> window.addEventListener('message', function(ev) { // if (ev.source !== window.parent) {return;} var data = ev.data; document.write("my name is ",data); document.body.style.background = 'red'; }, false); function send() { var data = document.querySelector('#inp').value; parent.postMessage(data, 'http://localhost:8080/'); // 若父页面的域名和指定的不一致,则postMessage失败 // parent.postMessage(data, '*'); // 触发父页面的message事件 } </script> </html>
1.html
<!DOCTYPE html> <html> <head> <title>window.postMessage</title> <meta charset="utf-8"/> <h2>test接收区</h2> </head> <body> <h2 class="header">page A</h2> <div class="mb20"> <textarea name="ta" id="data" cols="30" rows="5">hello world</textarea> <button style="font-size:20px;" οnclick="send()">post message</button> </div> <!-- 跨域的情况 --> <iframe src="http://localhost:8080/chajian/test.html" id="child" style="display: block; border: 1px dashed #ccc; height: 300px;"></iframe> <script> function send() { var data = document.querySelector('#data').value; window.frames[0].postMessage(data, 'http://localhost:8080/'); // 触发跨域子页面的messag事件 } window.addEventListener('message', function(messageEvent) { var data = messageEvent.data; console.info('message from child:', data); document.write("收到了数据: ",data); document.body.style.background = 'red'; }, false); </script> </body> </html>
同样的,1.html是主页面。打开html,就可以实现交互了。
关于HTML中postmessage的用法介绍就分享到这里了,希望以上内容可以对大家有一定的参考价值,可以学以致用。如果喜欢本篇文章,不妨把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。