一、基本原理

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. cdq分治(hdu 5618 Jam's problem again[陌上花开]、CQOI 2011 动态逆序对、hdu 4742 Pinball Game、hdu 4456 Crowd、[HEOI2016/TJOI2016]序列、[NOI2007]货币兑换 )

    hdu 5618 Jam's problem again #include <bits/stdc++.h> #define MAXN 100010 using namespace std; ...

  2. Redux Counter example

    此项目模板是使用Create React App构建的,它提供了一种简单的方法来启动React项目而无需构建配置. 使用Create-React-App构建的项目包括对ES6语法的支持,以及几种非官方 ...

  3. js拖拽效果详细讲解

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Battery Historian 使用常用命令

    一.重置电池数据收集数据 打开电池数据获取:adb shell dumpsys batterystats --enable full-wake-history 重置电池数据: adb shell du ...

  5. ORA-28000错误的原因及解决办法

    当使用SQL*Plus登录时,Oracle数据库时提示“ORA-28000:帐号被锁定”. 导致出现改错误的原因是:在oracle database 11g中,默认在default概要文件中设置了“F ...

  6. kubernetes云平台管理实战:HPA水平自动伸缩(十一)

    一.自动伸缩 1.启动 [root@k8s-master ~]# kubectl autoscale deployment nginx-deployment --max=8 --min=2 --cpu ...

  7. Hadoop记录- zookeeper 监控指标

    目前zookeeper获取监控指标已知的有两种方式: 1.通过zookeeper自带的 four letter words command 获取各种各样的监控指标 2.通过JMX Client连接zo ...

  8. [Android] Android 锁屏实现与总结 (一)

    实现锁屏的方式有多种(锁屏应用.悬浮窗.普通Activity伪造锁屏等等).但国内比较主流并且被广泛应用的Activity伪造锁屏方式. 实例演示图片如下: 系列文章链接如下: [Android] A ...

  9. [物理学与PDEs]第1章第3节 真空中的 Maxwell 方程组, Lorentz 力 3.2 Lorentz 力

    1. Lorentz 假定, 不论带电体的运动状态如何, 其所受的力密度 (单位体积所受的力) 为 $$\bex {\bf F}=\rho {\bf E}+{\bf j}\times{\bf B} = ...

  10. docker学习-----docker服务的安装

    docker 以下观点个人理解,只做参考 一.docker本身的优势 1.docker他本身是一个容器,用来方便我们项目打包,做服务器虚拟化,统一开发者环境等多种优势:运行于docker上的项目可以快 ...