一、基本原理

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. java-查看java源码

    安装jdk后,自己的pc下自然而然就可以找到java的源码包.

  2. vue---mixins的用法

    相信大家都用过less.sass等预编译器.它们中也有mixins,用法也很简单,例如Less中: .box{ border:1px solid red; padding:10px; } .mixin ...

  3. grafana-Admin密码重置

    1)查看Grafana配置文件,确定grafana.db的路径 [paths] ;data = /var/lib/grafana [database] # For "sqlite3" ...

  4. matlab中randi代替randint生成随机均匀分布信号的用法

    %%新函数  2*randi([0,1],2,1)-1   等价于老函数     2*randint(2,1)-1 函数形式:randi([imin,imax],m,n) 参数解释: [imin,im ...

  5. SpringBoot项目@RestController使用 redirect 重定向无效

    Spring MVC项目中页面重定向一般使用return "redirect:/other/controller/";即可. 而Spring Boot当我们使用了@RestCont ...

  6. k64 datasheet学习笔记21--Direct Memory Access Multiplexer (DMAMUX)

    0.前言 本章主要介绍DMA MUX的相关内容 1.简介 1.1 概述 用来路由DMA源到16路DMA通道: 1.2 特性 1.52个外设slot和10个常开slot可以路由到16路DMA通道 2.1 ...

  7. if 语句中的判断

    经常写shell的朋友可能已经很熟了.有不同意见的同学请指出来,在这里多谢大家了. bash中如何实现条件判断?条件测试类型:    整数测试    字符测试    文件测试 一.条件测试的表达式: ...

  8. CIA402状态转换图

    CIA402状态转换如下图所示: 要想改变参数并使其生效,需要先将状态转换到ready,然后修改要配置的参数,再使其运行(operation enabled). 要发送的报文顺序基本如下: 1)   ...

  9. .Net Core---- 自带Json返回日期带T格式 解决

    前段时间再做core的列表显示中(前台代码是在.net core bootstrap集成框架上的(这是效果浏览地址:http://core.jucheap.com[效果地址来自:http://blog ...

  10. Visual Studio 2015中 没有“安装和部署”的解决方法

    使用Visual Studio 2015 Community新建项目,在已安装模板中的“其它项目类型”下未找到“安装和部署”选项.在微软官网下载 Microsoft Visual Studio 201 ...