HTML中postmessage的用法介绍-创新互联-成都快上网建站

HTML中postmessage的用法介绍-创新互联

今天小编给大家分享的是HTML中postmessage的用法介绍,相信很多人都不太了解,为了让大家更加了解HTML中postmessage的用法,所以给大家总结了以下内容,一起往下看吧。一定会有所收获的哦。

成都创新互联公司专注骨干网络服务器租用十多年,服务更有保障!服务器租用,IDC机房托管 成都服务器租用,成都服务器托管,骨干网络带宽,享受低延迟,高速访问。灵活、实现低成本的共享或公网数据中心高速带宽的专属高性能服务器。

postmessage用法

关于html5的PostMessage的用法总结

大家都知道,网页之间传递数据可以使用ajax请求来完成,今天我总结下我学习的postMessage是如何完成跨页面请求数据的呢?首先,postMessage是html5新增的一个解决跨域的一个方法。那他是如何使用的呢?这里我把一个案例分享出来把。

看下面的代码:

test.html










1.html




window.postMessage

test接收区

首先,它的原理是这样的。我就拿我的案例代码来说吧。

1.html里面镶嵌了一个iframe网页 框架,他就是靠这里传输数据的,等1.html加载完成之后,他会主动发给test.html 谢霆锋,然后test.html收到之后,它里面有接收消息的处理函数,他收到消息之后,立马 ,给网页返回 一段字符串,然后把自己的背景改成红色。这样就达到了网页互动的效果,可惜的是,万恶的ie6.7不支持,兼容度不高。

注意:postMessage的写法,postMessage之前写的是你要通信的window对象(也就是你要向谁通信),此时的window.parent的权限仅限于此,不能在像同域似的,进行获取父级的DOM元素,否则浏览器会报错,提示你不能进行跨域访问,我们再来看postMessage中所接收的参数,第一个参数就是你要像另外一个窗口传递的数据(只能传字符串类型),第二个参数表示目标窗口的源,协议+主机+端口号,是为了安全考虑,如果设置为“*”,则表示可以传递给任意窗口。

上面是单页面交互的,下面给个双页面交互的。其实都是一样的,不过就是 两个页面都写了监听 发送事件。

test.html








page B

1.html




window.postMessage

test接收区

page A

同样的,1.html是主页面。打开html,就可以实现交互了。

关于HTML中postmessage的用法介绍就分享到这里了,希望以上内容可以对大家有一定的参考价值,可以学以致用。如果喜欢本篇文章,不妨把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


当前题目:HTML中postmessage的用法介绍-创新互联
当前路径:http://kswjz.com/article/dpehic.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流