一、基本原理

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. Sequence II HDU - 5919（主席树）

    Mr. Frog has an integer sequence of length n, which can be denoted as a1,a2,⋯,ana1,a2,⋯,anThere are ...

  2. (BFS) leetcode 279. Perfect Squares

    Given a positive integer n, find the least number of perfect square numbers (for example, 1, 4, 9, 1 ...

  3. 剑指Offer_编程题_24

    题目描述 输入一颗二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径. /* struct TreeNode { int ...

  4. 剑指Offer_编程题_20

    题目描述 从上往下打印出二叉树的每个节点,同层节点从左至右打印.   /* struct TreeNode { int val; struct TreeNode *left; struct TreeN ...

  5. Docker：dockerfile构建php项目 [八]

    一.把项目封装成docker镜像的步骤 把项目封装成docker镜像的步骤: 1.先运行一个基础容器,手动制作docker镜像 2.编写dockerfile,构建镜像 3.测试运行 二.dockerf ...

  6. 淘宝网站上的 HTTP 缓存问题两则

    在阅读本文前推荐你先阅读我的前两篇文章< 扼杀 304,Cache-Control: immutable>和<关于缓存和 Chrome 的“新版刷新”>:下面要说的两个问题是在 ...

  7. 常见的游戏AI技术对比(FSM,HFSM,BT,GOAP,HTN,Utilitay,机器学习)

    最近研究的内容,比较懒还没写文章,先占个坑,过几天补

  8. C#中访问私有成员技巧

    源代码是别人的,你就不能修改源代码,只提供给你dll.或者你去维护别人的代码,源代码却有丢失.这样的情况如果你想知道私有成员的值,甚至去想直接调用类里面的私有方法.那怎么办呢?其实在.net中访问私有 ...

  9. Nginx详解篇

    Nginx主配置文件和参数: Nginx的默认站点目录是Nginx安装目录/application/nginx/下的html目录,如果要部署网站业务,只需要把开发号好的程序全部放置到/applicat ...

  10. mysql 原理 ~ 并行复制

    一 概念1 MTS(Prepared transactions slave parallel applier)   主库在同一时间进入prepare状态的事务可以被从库并行回放2 传统与改进   ma ...