window.postMessage(message,targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法 。
调用postMessage方法的window对象是指要接收消息的那一个window对象,该方法的第一个参数message为要发送的消息,类型只能为字符串;第二个参数targetOrigin用来限定接收消息的那个window对象所在的域,如果不想限定域,可以使用通配符 *。
需要接收消息的window对象,可是通过监听自身的message事件来获取传过来的消息,消息内容储存在该事件对象的data属性中 。
上面所说的向其他window对象发送消息,其实就是指一个页面有几个框架的那种情况,因为每一个框架都有一个window对象 。在讨论第二种方法的时候,我们说过,不同域的框架间是可以获取到对方的window对象的,而且也可以使用window.postMessage这个方法 。下面看一个简单的示例,有两个页面
![js中几种实用的跨域方法原理详解](http://img.jiangsulong.com/220405/0452132P0-13.jpg)
文章插图
![js中几种实用的跨域方法原理详解](http://img.jiangsulong.com/220405/0452132230-14.jpg)
文章插图
我们运行a页面后得到的结果:
![js中几种实用的跨域方法原理详解](http://img.jiangsulong.com/220405/0452132T3-15.jpg)
文章插图
我们看到b页面成功的收到了消息 。
使用postMessage来跨域传送数据还是比较直观和方便的,但是缺点是IE6、IE7不支持,所以用不用还得根据实际需要来决定 。
结语:
除了以上几种方法外,还有flash、在服务器上设置代理页面等跨域方式,这里就不做介绍了 。
以上四种方法,可以根据项目的实际情况来进行选择应用,个人认为window.name的方法既不复杂,也能兼容到几乎所有浏览器,这真是极好的一种跨域方法 。
推荐阅读
- 机器学习算法中的7个损失函数的详细指南
- 淘宝直播系统抽奖怎样才更容易中 淘宝直播间抽奖中奖技巧
- 如何挑选牛蹄
- 如何挑选牛筋?
- 什么是禅茶 什么是茶禅 有区别吗
- 如何处理牛舌
- 如何挑选白牛肝菌
- 西游记里的沙僧最后成为什么佛 西游记中为什么不能没有沙僧
- 梦到一条龙在空中盘旋 梦见两条龙在天上盘旋
- 中国文人以茶怡情 以茶养生之道