(二)文档请求不同源之window.postMessage跨域
一、基本原理
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跨域的更多相关文章
- (二)文档请求不同源之window.name跨域
一.基本原理 window.name不是一个普通的全局变量,而是当前窗口的名字.这里要注意的是每个iframe都有包裹它的window,而这个window 是top window的子窗口,而它自然也有 ...
- (二)文档请求不同源之location.hash跨域
一.基本原理 用location.hash解决域名完全不同的跨域,例如,http://www.baidu.com#helloworld中的"#helloworld"就是locati ...
- (二)文档请求不同源之flash跨域
对于FLash,IE是认object标签的,但是FF和Chrome是认embed标签的. 1.客户端 <param name="allowScriptAccess" valu ...
- (三)ajax请求不同源之服务器代理跨域
一.基本原理 Server Proxy,顾名思义,在服务器端设置一个代理,由服务器端向跨域的网站发出请求,再将请求结果返回给前端,成功避免同源策略的限制. 二.客户端和服务端代码 1.在localho ...
- HTML5之worker开启JS多线程模式及window.postMessage跨域
worker概述 worker基本使用 window下的postMessage worker多线程的应用 一.worker概述 web worker实际上是开启js异步执行的一种方式.在html5之前 ...
- jsonp突破同源策略,实现跨域访问请求
跨域访问问题,相信大家都有遇到过.这是一个很棘手的问题.不过道高一尺,魔高一丈,对于这类问题,总有解决问题的方案.最近我又接触到了这个问题,解决的途径是ajax+jsonp. 说到这个问题,不得不说一 ...
- jsonp突破同源策略,实现跨域訪问请求
版权声明:本文为博主原创文章,未经博主同意不得转载.如需转载请声明:[转自 http://blog.csdn.net/xiaoxian8023 ] https://blog.csdn.net/xiao ...
- 什么是同源策略,什么是跨域,如何跨域,Jsonp/CORS跨域
同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响. 可以说Web是构建在同源策略基础之上 ...
- AJAX_违反了同源策略_就是"跨域"——jsonp 和 cors
https 协议 默认端口号 443 http 协议 默认端口号 80 同源策略 由网景公司提出的——浏览器 的 为了浏览器安全而生 同源策略: 协议.域名.端口号 必须完全一致 违 ...
随机推荐
- Stanford Local 2016 G "Ground Defense"(线段树)
传送门 题意: 有 n 个城市,编号 1~n: 有两种操作:Update,Query Update: E i s a d 更新区间[ i,i+d-1 ], i 节点降落 s 人, i+1 节点降落 s ...
- MapReduce-FileInputFormat
在运行 MapReduce 程序时,输入的文件格式包括:基于行的日志文件.二进制格式文件.数据库表等.那么,针对不同的数据类型,MapReduce 是如何读取这些数据? FileInputFormat ...
- [JDK8]性能优化之使用LongAdder替换AtomicLong
如果让你实现一个计数器,有点经验的同学可以很快的想到使用AtomicInteger或者AtomicLong进行简单的封装. 因为计数器操作涉及到内存的可见性和线程之间的竞争,而Atomic***的实现 ...
- [浏览器事件循环] javaScript事件循环 EventLoop
前言 Event Loop即事件循环,是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理. 先熟悉基本概念 [堆Heap] 堆是一种数据结构 ...
- css文件引人的三种方式
前言 1995年,W3C发布了CSS草案 1996年,W3C正式推出CSS1 1998年,推出CSS2 2001年从CSS3开始,CSS这门语言分割成多个独立的模块,每个模块独立分级,且只包含一小部分 ...
- JavaScript 的正则也有单行模式了
正则表达式最早是由 Ken Thompson 于 1970 年在他改进过的 QED 编辑器里实现的,正则里最简单的元字符 “.” 在当时所匹配的就是除换行符外的任意字符: "." ...
- SQL注入绕过技巧总结
1.SQL注入过程中的处理# 终端payload编码------>web服务器解码-------->CGI脚本解码------>web应用解码----->数据库解码 浏览器.代 ...
- topshelf 服务启动运行
topshlf 服务启动运行方式 安装:servicename.exe install 启动:servicename.exe start 卸载:servicename.exe uninstall
- Java线程安全队列BlockingQueue
线程安全队列BlockingQueue 用法跟普通队列没有区别,只是加入了多线程支持. 这里主要说说add和put,以及poll和take的区别: add和put都是用来忘队列里面塞东西的,而poll ...
- 微信app支付的坑
app支付商户申请,需注册并认证开放平台账号后电脑端登录开放平台官网:open.weixin.qq.com,[管理中心]->[移动应用],选择需要申请支付的应用,点击[查看]->[微信支付 ...