一、基本原理

HTML5为了解决跨域，引入了跨文档通信API（Cross-document messaging）。这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。Internet Explorer 8+, chrome，Firefox , Opera和Safari 都支持这个功能。

二、测试步骤

1、创建a.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>window.postMessage解决跨域a.html</title>

</head>

<body>

<script>

    window.onload = function() {

        var subwin = window.open('http://localhost:8081/b.html', 'title');

        //父窗口http://localhost:8080/a.html向子窗口http://localhost:8081/b.html发消息，调用postMessage方法。

        subwin.postMessage('我要给你发消息了!', 'http://localhost:8081');

    }

    window.addEventListener('message', function(e) {

      console.log('a.html接收到的消息:', e.data);

    });

</script>

</body>

</html>

发送消息，监听消息。

2、创建b.html

<script>

  var messageFunc = function (event) {

      if(event.source != window.parent) {

        return;

      }

      var data = event.data,//消息

      origin = event.origin,//消息来源地址

      source = event.source;//源Window对象

      if(origin == "http://localhost:8080"){

        console.log('b.html接收到的消息:', data);

      }

      source.postMessage('我已经接收到消息了!', origin);

    };

    if (typeof window.addEventListener != 'undefined') {

      window.addEventListener('message', messageFunc, false);

    } else if (typeof window.attachEvent != 'undefined') {

      window.attachEvent('message', messageFunc);

    }

</script>

3、打开两个http服务器

4、打开浏览器就可以看到结果：http://localhost:8080/a.html

(二)文档请求不同源之window.postMessage跨域的更多相关文章

  1. (二)文档请求不同源之window.name跨域

    一.基本原理 window.name不是一个普通的全局变量,而是当前窗口的名字.这里要注意的是每个iframe都有包裹它的window,而这个window 是top window的子窗口,而它自然也有 ...

  2. (二)文档请求不同源之location.hash跨域

    一.基本原理 用location.hash解决域名完全不同的跨域,例如,http://www.baidu.com#helloworld中的"#helloworld"就是locati ...

  3. (二)文档请求不同源之flash跨域

    对于FLash,IE是认object标签的,但是FF和Chrome是认embed标签的. 1.客户端 <param name="allowScriptAccess" valu ...

  4. (三)ajax请求不同源之服务器代理跨域

    一.基本原理 Server Proxy,顾名思义,在服务器端设置一个代理,由服务器端向跨域的网站发出请求,再将请求结果返回给前端,成功避免同源策略的限制. 二.客户端和服务端代码 1.在localho ...

  5. HTML5之worker开启JS多线程模式及window.postMessage跨域

    worker概述 worker基本使用 window下的postMessage worker多线程的应用 一.worker概述 web worker实际上是开启js异步执行的一种方式.在html5之前 ...

  6. jsonp突破同源策略，实现跨域访问请求

    跨域访问问题,相信大家都有遇到过.这是一个很棘手的问题.不过道高一尺,魔高一丈,对于这类问题,总有解决问题的方案.最近我又接触到了这个问题,解决的途径是ajax+jsonp. 说到这个问题,不得不说一 ...

  7. jsonp突破同源策略，实现跨域訪问请求

    版权声明:本文为博主原创文章,未经博主同意不得转载.如需转载请声明:[转自 http://blog.csdn.net/xiaoxian8023 ] https://blog.csdn.net/xiao ...

  8. 什么是同源策略,什么是跨域,如何跨域,Jsonp/CORS跨域

    同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响. 可以说Web是构建在同源策略基础之上 ...

  9. AJAX_违反了同源策略_就是"跨域"——jsonp 和 cors

    https 协议    默认端口号 443 http 协议    默认端口号 80 同源策略 由网景公司提出的——浏览器 的 为了浏览器安全而生 同源策略: 协议.域名.端口号    必须完全一致 违 ...

随机推荐

  1. 用IntelliJ IDEA 开发Spring+SpringMVC+Mybatis框架 分步搭建二：配置MyBatis 并测试（1 构建目录环境和依赖）

    引言:在用IntelliJ IDEA 开发Spring+SpringMVC+Mybatis框架 分步搭建一   的基础上 继续进行项目搭建 该部分的主要目的是测通MyBatis 及Spring-dao ...

  2. Dubbo2.6.5入门——简单的HelloWorld

    建立父工程 打开idea,新建一个空的maven工程,作为整个项目的父工程. <?xml version="1.0" encoding="UTF-8"?& ...

  3. FreeNAS-9.10虚拟机测试安装

     虚拟机安装NreeNAS-9.10步骤 需求:网络监控磁盘要扩容 测试环境: CPU 内存 系统盘 共享盘 网卡 2核 2G 20G 20G 桥接 系统版本:FreeNAS-9.10 一.配置虚拟机 ...

  4. 解决js复制在安卓和ios兼容问题

    var clipboard = new ClipboardJS('.fr', { // target: function() { // return document.querySelector('d ...

  5. CMDB服务器管理系统【s5day91】：资产采集相关问题

    资产采集唯一标识和允许临时修改主机名 class AgentClient(BaseClient): def exec(self): obj = PluginManager() server_dict ...

  6. 金融量化分析【day112】：初识量化交易

    一.摘要 为什么需要量化交易? 量化交易是做什么? 量化交易的价值何在? 做量化交易需要什么? 聚宽是什么? 零基础如何快速入门量化交易? 自测与自学 二.量化交易比传统交易强多少? 它能让你的交易效 ...

  7. Hadoop记录-hadoop jmx配置

    1.hadoop-env.sh添加export HADOOP_JMX_OPTS="-Dcom.sun.management.jmxremote.authenticate=false -Dco ...

  8. [数分提高]2014-2015-2第6教学周第1次课讲义 3.3 Taylor 公式

    1. (Taylor 公式). 设 $f^{(n)}$ 在 $[a,b]$ 上连续, $f^{(n+1)}$ 在 $(a,b)$ 内存在, 试证: $ \forall\ x,x_0\in [a,b], ...

  9. [再寄小读者之数学篇](2014-06-20 求极限-H\"older 不等式的应用)

    设非负严格增加函数 $f$ 在区间 $[a,b]$ 上连续, 有积分中值定理, 对于每个 $p>0$ 存在唯一的 $x_p\in (a,b)$, 使 $$\bex f^p(x_p)=\cfrac ...

  10. [物理学与PDEs]第5章第2节 变形的描述, 应变张量 2.1 变形梯度张量

    $$\bex \rd{\bf y}={\bf F}\rd {\bf x}, \eex$$ 其中 ${\bf F}=\n_x{\bf y}=\sex{\cfrac{\p y_i}{\p x_j}}$ 为 ...