(二)文档请求不同源之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 同源策略 由网景公司提出的——浏览器 的 为了浏览器安全而生 同源策略: 协议.域名.端口号 必须完全一致 违 ...
随机推荐
- Battery Historian 使用常用命令
一.重置电池数据收集数据 打开电池数据获取:adb shell dumpsys batterystats --enable full-wake-history 重置电池数据: adb shell du ...
- solr的域
solrhom相当于存放数据的地方,里面一个个文件相当于数据库,每个数据库里面有两个文件夹,一个data,一个conf,conf下有一个schema.xml文件,配置域,相当于表的字段. solr中内 ...
- EF CodeFirst系列（2）---CodeFirst的数据库初始化
1. CodeFirst的默认约定 1.领域类和数据库架构的映射约定 在介绍数据库的初始化之前我们需要先了解领域类和数据库之间映射的一些约定.在CodeFirst模式中,约定指的是根据领域类(如Stu ...
- MySQL学习笔记（五）并发时经典常见的死锁原因及解决方法
MySQL都有什么锁? MySQL有三种锁的级别:页级.表级.行级. 表级锁:开销小,加锁快:不会出现死锁:锁定粒度大,发生锁冲突的概率最高,并发度最低. 行级锁:开销大,加锁慢:会出现死锁:锁定粒度 ...
- Linux查看系统信息的命令及已安装软件包的命令
系统 uname -a查看内核/操作系统/CPU信息head -n 1 /etc/issue查看操作系统版本cat /proc/cpuinfo查看CPU信息hostname查看计算机名lspci -t ...
- 《11招玩转网络安全》之第一招：Docker For Docker
玩转黑客那些工具,缺少了虚拟机怎么行,除了用虚拟机虚拟整个系统,Docker也不能缺少,读者只需要知道,Docker只虚拟Linux系统中的某个程序就可以了.本节就来介绍Linux下安装设置Docke ...
- Linux 下软件的安装方法
1:rpm 安装 ,rpm安装会有依赖问题,例如安装A,提示需要安装B 安装B需要安装C 格式: rpm -ivh [包名].rpm 2:yum 安装 特点:简单.易用.高校 缺点:不能定制 解决 ...
- dense prediction问题
dense prediction 理解:标注出图像中每个像素点的对象类别,要求不但给出具体目标的位置,还要描绘物体的边界,如图像分割.语义分割.边缘检测等等. 基于深度学习主要的做法有两种: 基于图 ...
- PHP中的常用数组操作方法
一.数组操作的基本函数 数组的键名和值array_values($arr); 获得数组的值array_keys($arr); 获得数组的键名array_flip($arr); 数组中的值与键名互 ...
- yolo类检测算法解析——yolo v3
每当听到有人问“如何入门计算机视觉”这个问题时,其实我内心是拒绝的,为什么呢?因为我们说的计算机视觉的发展史可谓很长了,它的分支很多,而且理论那是错综复杂交相辉映,就好像数学一样,如何学习数学?这问题 ...