跨域消息传递：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. HTTP之referer

    安全培训中提到可以通过referer判断安全性,hackbar中也有一个enable referer的选项,则,这个referer到底是个什么角色? (以下是搜集的一些资料整合,链接均放到底部,不再一 ...

  2. XP远程桌面连接2008提示：远程计算机需要网络级别身份验证，而您的计算机不支持该验证

    原文链接:http://kong62.blog.163.com/blog/static/1760923052011319113044653/ 解决办法: 修改注册表2个地方 开始-运行-regedit ...

  3. systemd的运行级别与服务管理命令简介

    从很久很久以前我们就在使用静态运行级别.而systemd提供了更为动态灵活的机制,来管控你的系统. 在开始介绍systemd命令前,让我们先简单的回顾一下历史.在Linux世界里,有一个很奇怪的现象, ...

  4. bioperl 自动化下载genbank 中的序列

    当我们想要从genbank 中下载序列的时候,总需要点击右上角的download 按钮,选择对应的格式,然后通过浏览器进行下载,这样反复的点击很费时间了 其实可以通过bioperl 自动化的完成下载: ...

  5. Linux--nginx域名绑定-url rewrite

    进入/usr/local/nginx/conf 编辑 nginx.conf 绑定域名: 添加一个 server元素,更改后的配置内容可能如下: server { listen       80; se ...

  6. php函数返回引用示例

    <?php class Test { public $userCache; public function init() { for($i = 0; $i < 5; $i++) { $us ...

  7. fedora arm-linux-gcc4.4.3编译u-boot-2010.3

    Mini2440开发板,samsungS3C2440芯片 构建u-boot 两个包: arm-linux-gcc4.4.3 u-boot-2010.3 fedora 不支持32位库,编译出现错误: / ...

  8. 第一篇 一步一步看透C++

        毕业快一年半了,这些时候,都是在底层方面做的一些工作,虽然内核的C也实现了C++中的一些抽象机制,面向对象,继承,多态,封装等等,但是,想着大学里面,电子类的学习,都是偏向底层的,有过C++的 ...

  9. vue如何加入百度ssp广告位代码

    vue如何加入百度联盟广告,可以参考 :http://www.cnblogs.com/beileixinqing/p/8379184.html 这里讲述vue如何加入百度ssp媒体的广告 这里是百度异 ...

  10. Android: 背景图片平铺要这么干

    <?xml version="1.0" encoding="utf-8"?>  <bitmap xmlns:android="htt ...