使用window.postMessage实现跨域通信

JavaScript由于同源策略的限制,跨域通信一直是棘手的问题。当然解决方案也有很多:

  • document.domain+iframe的设置,应用于主域相同而子域不同;
  • 利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限
  • Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要在同一客户端就行,跨应用程序, 可以跨域。
  • window.name 保存数据以及跨域 iframe 静态代理动态传输方案,充分的运用了window.name因为页面的url改变而name不改变的特性。

各种方案网上都有很多实例代码,大家可以自己搜索一下。
html5中最炫酷的API之一:就是 跨文档消息传输Cross Document Messaging。高级浏览器Internet Explorer 8+, chrome,Firefox , Opera  和 Safari 都将支持这个功能。这个功能实现也非常简单主要包括接受信息的”message”事件和发送消息的”postMessage”方法。

发送消息的”postMessage”方法

向外界窗口发送消息:

otherWindow.postMessage(message, targetOrigin);
otherWindow: 指目标窗口,也就是给哪个window发消息,是 window.frames 属性的成员或者由 window.open 方法创建的窗口

参数说明:

  • message: 是要发送的消息,类型为 String、Object (IE8、9 不支持)
  • targetOrigin: 是限定消息接收范围,不限制请使用 ‘*’

接受信息的”message”事件

	var onmessage = function (event) {var data = event.data;var origin = event.origin;//do someing};if (typeof window.addEventListener != 'undefined') {window.addEventListener('message', onmessage, false);} else if (typeof window.attachEvent != 'undefined') {//for iewindow.attachEvent('onmessage', onmessage);}
回调函数第一个参数接收 Event 对象,有三个常用属性:
  • data: 消息
  • origin: 消息来源地址
  • source: 源 DOMWindow 对象

看一个简单的来自网上的demo:http://www.css88.com/demo/postmessage/

当然postmessage也有一些不足的地方:
  • ie8,ie9下传递的数据类型值支持字符串类型,不过可以使用用JSON对象和字符串之间的相互转换来解决这个问题;
  • ie6,ie7需要写兼容方案,个人认为window.name比较靠谱;

参考网址:
http://js8.in/752.html
http://www.36ria.com/3890
http://www.planeart.cn/?post_type=post&p=1620

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《使用window.postMessage实现跨域通信》

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/276708.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

appium启动app失败_Appium-Desktop Capability 配置及启动App演示

Appium-Desktop Capability配置介绍desired capability的功能是配置Appium会话。为什么要配置capability,目的就是为了告诉Appium服务器您想要自动化的平台和应用程序。Desired Capabilities是一组设置的键值对的集合,其中键对应设置的名称,而…

WinRAR 命令行简体中文说明

从命令行也可以运行 WinRAR 命令,常规的命令行语法描述如下:WinRAR - -命令 要 WinRAR 运行的字符组合代表功能。开关 切换操作指定类型,压缩强度,压缩文件类型,等等的定义。压缩文件 要处理的压缩文件名。文件 要处理的文件名。列…

以Windows服务方式运行.NET Core程序

原文:以Windows服务方式运行.NET Core程序在之前一篇博客《以Windows服务方式运行ASP.NET Core程序》中我讲述了如何把ASP.NET Core程序作为Windows服务运行的方法,而今,我们又遇到了新的问题,那就是:我们的控制台程序&#xff0c…

SparkSession.read().csv()无法定位本地文件的问题

原因是spark有两个文件头 [file://]代表本地 [hdfs://]代表hdfs路径 如果路径没有文件头,spark会将该路径默认添加上"hdfs://" 所以如果要访问本地csv文件,需要确保路径前面有"file://" //java代码,告诉spark这是本地文件…

JavaScript的10种跨域共享的方法

在客户端编程语言中,如javascript和ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那…

好用的shell工具_精选5个酷毙的Python工具

来自:Python之禅工欲善其事必先利其器,一个好的工具能让起到事半功倍的效果,Python社区提供了足够多的优秀工具来帮助开发者更方便的实现某些想法,下面这几个工具给我的工作也带来了很多便利,推荐给追求美好事物的你。…

承载辉煌历史 畅想无线未来

看了JustDI的文章“手机也能当电脑用?--谈谈未来智能手机操作系统的走向”,作为嵌入式爱好者,我也想谈谈自己的看法。首先,从网络发展的角度看,移动互联网的宽带化,宽带互联网的移动…

接口码释义

1xx:信息,请求收到,继续处理 2xx:成功,行为被成功地接受、理解和采纳 3xx:重定向,为了完成请求,必须进一步执行的动作 4xx:客户端错误,请求包含语法错误或…

java读取文件内容,文件头有\ufeff

"\ufeff"是UTF-8 BOM编码的文件头,代表该文件按照什么字节顺序排序 调用java的工具类[ UnicodeInputStream ]即可解决这个问题 //第二个参数targetEncoding为null时在getDetectedEncoding方法中会自动检测编码类型 UnicodeInputStream unicodeInputStrea…

6款国内外SNS开源软件 搭建社交网站利器

SNS(Social Network Service),有时称为社交网络,有时称为社会化网络,专指旨在帮助人们建立社会性网络的互联网应用服务。如果对SNS概念还很模糊,说到人人网、开心网你就明白了。 去年360圈、蚂蚁网接连关站给SNS前景蒙上一层阴影&…

aop实现原理_从宏观的实现原理和设计本质入手,带你理解 AOP 框架的原理

点击上方“Java知音”,选择“置顶公众号”技术文章第一时间送达!作者:FeelsChaoticjuejin.im/post/5c57b2d5e51d457ffd56ffbb前言本文将从另一个角度讲解 AOP,从宏观的实现原理和设计本质入手。大部分讲 AOP 的博文都是一上来就罗…

孟宪会老师推荐的一部C#图解教程

Amazon五星级盛誉 C# 最新特性一览无余 数十年开发与教学经验的结晶 图、表和文字完美结合,最易学的C# 教程 本书详细信息:http://www.china-pub.com/43556 微软4大名著评选结果揭晓:http://www.china-pub.com/static07/0812/jsj_micrmingz_0…

Python数据分析Numpy库方法简介(三)

补充: np.ceil()向上取整 3.1向上取整是4 np.floor()向下取整 数组名.resize((m,n)) 重置行列 基础操作 np.random.randn()符合正态分布(钟行/高斯)的数据 矩阵的水平拼接 np.vstack((a,b)) 矩阵的垂直拼接 np.hstack((a,b)) 点阵积: np.dot(a,b)/ ab…

xxl-job源码分析

xxl-job源码分析 xxl-job 系统说明 安装 安装部署参考文档:分布式任务调度平台xxl-job 功能 定时调度、服务解耦、灵活控制跑批时间(停止、开启、重新设定时间、手动触发) XXL-JOB是一个轻量级分布式任务调度平台,其核心设计目标是…

定制jQuery File Upload为微博式单文件上传

原文链接:http://avnpc.com/pages/single-file-upload-component-by-jquery-file-upload jQuery File Upload是一个非常优秀的上传组件,主要使用了XHR作为上传方式,并且利用了相当多的现代浏览器功能,所以可以实现诸如批量上传、超…

vb趣味编程弹球小游戏_最好玩的微信小游戏集合,总有一款是你没玩过的

大家好,这里是小雅龙生活趣味时间,自从17年微信推出小游戏程序以来,微信小游戏行业可谓是炙手可热,知道2019年不断有许许多多的微信小游戏如雨后春笋般的生根发芽。下面就由我带大家来看看今年最好玩,最受欢迎的微信小…

開發MOSS2007 Masterpage的一些經驗

一直在做MOSS平臺的Masterpage開發,碰到很多的問題,總結了一些經驗,特此記錄: masterpage的所有的ContentPlaceholder詳細解釋見以下網址:http://www.cnblogs.com/WinYoung/archive/2007/06/25/791766.html 1.如果應用masterpage以后IE狀態欄出現""網頁指令碼錯誤訊息…

Golang——垃圾回收GC(2)

1 垃圾回收中的重要概念 1.1 定义 In computer science, garbage collection (GC) is a form of automatic memory management. The garbage collector, or just collector, attempts to reclaim garbage, or memory occupied by objects that are no longer in use by the pro…

java gui框架_推荐!程序员整理的Java资源大全

构建这里搜集了用来构建应用程序的工具。Apache Maven:Maven使用声明进行构建并进行依赖管理,偏向于使用约定而不是配置进行构建。Maven优于Apache Ant。后者采用了一种过程化的方式进行配置,所以维护起来相当困难。Gradle:Gradle…

帆软报表(finereport)控件背景色更改

setTimeout(function() {$(.fr-trigger-btn-up).css({"background-color": "#003399" });}, 100); 转载于:https://www.cnblogs.com/Williamls/p/11571586.html