跨域消息传递：postMessage()

1、兼容性问题：IE8及其以上浏览器和其它主流浏览器都已经支持

2、使用范围：跨iframe、跨页面、跨域

3、使用方法：

　　发送消息：postMessage( data, scope ) data值需要传递的消息，scope指定发送给那些域

　　监听消息：使用事件监听方法监听（addEventListener/attachEvent）

　　之所以可以使用事件监听方法监听，是因为当调用postMessage方法时，会触发message事件，并传递给事件处理程序一个事件对象。

4、事件对象的属性：

　　data：传递的消息

　　source：消息源自的Window对象

　　origin：消息来源的URL（可以用于过滤需要的来源的数据，忽略不明来源的数据）

原生js--跨域消息传递的更多相关文章

  1. JQuery和原生JS跨域加载JSON数据或HTML。

    前提:有时候需要在网页上,加载另一个网站上的数据.或者加载另一个网站上的一个页面.Js的Ajax请求不具备跨域功能,可以使用JQuery来实现. 网页端JS代码: $(function () { $. ...

  2. jsonp原生js跨域拿新浪数据插件封装【可扩展】

    //修改了一个bug,增加了手动释放垃圾 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  3. 前端Js跨域方法汇总—剪不断，理还乱，是跨域

    1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...

  4. js跨域请求数据的3种常用的方法

    由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript   在 ...

  5. js跨域请求方式 ---- JSONP原理解析

    这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下     跨域请求数据解决方案主要有如下解决方法:   1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 H ...

  6. 5种处理js跨域问题方法汇总（转载）

    1.JSONP跨域GET请求 ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那 ...

  7. JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  8. 【js跨域】js实现跨域访问的几种方式

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  9. 【前端】【转】JS跨域问题总结

    详情见原博客:详解js跨域问题 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 跨域资源共享(CORS) CORS(Cross-Origin Resource Sharing)跨域资源 ...

  10. js跨域访问，No 'Access-Control-Allow-Origin' header is present on the requested resource

    js跨域访问提示错误:XMLHttpRequest cannot load http://...... No 'Access-Control-Allow-Origin' header is prese ...

随机推荐

  1. Tomcat的Admin和Manager工具初探

    版本说明 apache-tomcat-5.5.28.zip(解压缩版) Manager工具是自带的,Admin工具apache-tomcat-5.5.28-admin.zip需要单独安装 下载地址:h ...

  2. PyQt的图片资源的路径问题。

    百度到的PyQt的添加资源大部分都是通过Qt Creater添加资源的,适用于拖拽形成的界面. 问题一:纯粹手写的界面,添加资源呢? 文件夹路径: |----img |--aa.jpg |----vi ...

  3. Http请求的工具

    1.火狐的插件 HttpRequester 安装方法:火狐浏览器的最右上角的菜单,打开附件组件 ,搜索:HttpRequester,重启火狐浏览器.在菜单栏的工具下可以看到 HttpRequester ...

  4. HTML5 Canvas 超炫酷烟花绽放动画教程

    这是一个很酷的HTML5 Canvas动画,它将模拟的是我们现实生活中烟花绽放的动画特效,效果非常逼真,但是毕竟是电脑模拟,带女朋友看就算了,效果还是差了点,呵呵.这个HTML5 Canvas动画有一 ...

  5. CentOS 7 打开关闭FirewallD防火墙端口命令

    CentOS 7 使用firewalld代替了原来的iptables,使用方法如下: >>>关闭防火墙 systemctl stop firewalld.service        ...

  6. EasyUI的功能树之扁平化

    上篇博客主要介绍了异步加载树的方法,通过前台传给后台一个节点的id值,然后当单击节点加号时,查询并显示其子节点的数据.其实如果不是很大的数据,我们本可以次把树中所有节点都加载上来的.也就是说,我的Ac ...

  7. ul li列表元素浮动导致border没有底边解决办法

    如图,当ul li,li元素浮动,并且ul元素也overflow:hidden清除浮动的时候,给li元素加了border,但是不显示底边,这时候要看是不是没有给li元素加高,因为加了border之后默 ...

  8. 19 Go的全能ORM简单入门

    gorm 昨天我的ldap账户改了以后,openfalcon(v2.1)-dashboard竟然无法登陆了!显然,没有把我的密码同步到本地数据库里面,怎么办?只能改openfalcon用户认证的源码了 ...

  9. Android程序中有多个Activity时的可全部退出方法

    下面是代码.该方法的原理是用一个list记录每次启动的acitivity,在退出时候循环退出改list中保存的acitivity,这样就做到了所有的acitivity完美退出.   先写一个类继承Ap ...

  10. Ubuntu下PHP动态编译出现Cannot find autoconf的解决方法

    执行phpize时出现Cannot find autoconf 错误 Ubuntu下解决方法 sudo apt-get install autoconf