一、基本原理

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. 关于opencv的cv2.WINDOW_一类

    用法:cv2.namedWindow('窗口标题',默认参数) 默认参数:cv2.WINDOW_AUTOSIZE+cv2.WINDOW_KEEPRATIO+cv2.WINDOW_GUI_EXPANDE ...

  2. golang与python多线程的并发速度

    一.golang的代码 package main import ( "fmt" "time" ) func Text_goroute(a int, b int) ...

  3. ZooKeeper 概述

    ZooKeeper:分布式应用程序的分布式协调服务 ZooKeeper:是用于分布式应用程序的分布式开源协调服务 可以简单理解:ZooKeeper = 文件系统 + 通知机制 从设计模式角度理解:Zo ...

  4. 深入学习javaScript闭包(闭包的原理，闭包的作用，闭包与内存管理)

    前言 虽然JavaScript是一门完整的面向对象的编程语言,但这门语言同时也拥有许多函数式语言的特性. 函数式语言的鼻祖是LISP,JavaScript在设计之初参考了LISP两大方言之一的Sche ...

  5. [物理学与PDEs]第4章第3节 一维反应流体力学方程组 3.1 一维反应流体力学方程组

    1. 一维粘性热传导反应流体力学方程组 $$\beex \bea \cfrac{\p\rho}{\p t}&+\cfrac{\p}{\p x}(\rho u)=0,\\ \cfrac{\p}{ ...

  6. [再寄小读者之数学篇](2014-04-08 from 1297503521@qq.com $\sin x-x\cos x=0$ 的根的估计)

    (2014-04-08 from 1297503521@qq.com) 设方程 $\sin x-x\cos x=0$ 在 $(0,+\infty)$ 中的第 $n$ 个解为 $x_n$. 证明: $$ ...

  7. React Router v4 页面传值的三种方法

    传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...

  8. 解压unzip的用法

    1.把文件解压到当前目录下 [root@instance-q6z0ksfb xmerge_test]# unzip db1.zip 2.把文件解压到指定的目录下,需要用到-d参数. unzip -d ...

  9. Django之auth模块

    http://www.cnblogs.com/liwenzhou/p/9030211.html 1.首先导入auth模块 from django.contrib import auth 2.创建aut ...

  10. Beta 冲刺（1/7）

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:beta冲刺(1/7) 团队部分 后敬甲(组长) 过去两天完成了哪些任务 团队完成测试答辩 整理博客 复习接口 接下来的 ...