web跨域通信问题解决
Web页面的跨域问题产生原因是企图使用JS脚本读写不同域的JS作用域。问题根源来自JavaScript的同源策略：出于安全考虑，Javascript限制来自不同源的web页面JS脚本之间进行交互。否则就会出现各种获取用户私密数据的问题。
1、document.domain
它只能只能解决一个域名下的不同二级域名页面跨域，例如person.aa.com与book.aa.com，可以将book.aa.com用iframe添加到 person.aa.com的某个页面下,在person.aa.com和iframe里面都加上document.domain = "aa.com"。
2、Jsonp
Jsonp可以解决XmlHttpRequest请求不能跨域的限制，原理是通过动态创建一个<script> 元素来请求一段JS脚本，让这段脚本在页面作用域里执行，迂回实现类似Ajax的请求。
//加载js文件
function load_script(url, callback){
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.onload = script.onreadystatechange = function(){
if((!this.readyState||this.readyState === "loaded"||this.readyState === "complete")){
callback && callback();
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
if ( head && script.parentNode ) {
head.removeChild( script );
}
}
};
head.insertBefore( script, head.firstChild );
}
3、用HTML5的API
HTML5提供了一个可以让我们跨域通信的API：postMessage，支持的浏览器有 Internet Explorer 8.0+, Chrome 2.0+、Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+。window.postMessage方法被调用时，目标窗口的message事件即被触发，这样可以实现不同域直接的信息交流。
假设A页面中包含iframe B页面
var winB = window.frames[0];
winB.postMessage('hello iframe', 'http://www.test.com');
//B页面（监听message事件、获取信息）
window.addEventListener('message',function(e){
// ensure sender's origin
if(e.origin == 'http://www.aa.com'){
console.log('source: ' + e.source);
console.log('Message Received: ' + e.data);
}
},false)
PS. 通信事件没有冒泡.
4、window.name
window.name一般用来获取子窗口：window.frames[windowName]；它有个重要特点：一个窗口无论加载什么页面，window.name都保持不变。而这个特点可以用来进行跨域信息传递。例如3个页面分别为A、B、C。A是主页面，里面嵌入了一个iframe：B页面。B页面对window.name进行赋值，接下来重定向到C页面。C页面在另外一个域里面，它的功能就是读取出B页面写入的window.name。
<!-- A页面 -->
<html>
<head>
<title> Page A</title>
</head>
<body>
<iframe src=”B.html” />
</body>
</html> <!-- B页面 -->
<html>
<head>
<title> Page B </title>
</head>
<body>
<script language=”JavaScript”>
var a = [];
for (var i = 0;i < 10; i++){
a.push(’xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx’+i);
}
window.name= a.join(''); //写入window.name，这里可以写入一个比较大的值
window.location.href = ‘http://www.cc.com/C.html’;
</script>
</body>
</html> <!-- C页面 -->
<html>
<head>
<title> Page C </title>
</head>
<body>
<script language=”JavaScript”>
document.write(window.name);//读出window.name，并写到页面上
</script>
</body>
</html>
可以看到C页面正常输出了B页面写入的window.name。
web跨域通信问题解决的更多相关文章
- Web跨浏览器进程通信(Web跨域)
Web跨域已是老生常谈的话题,这次来尝试下跨域浏览器进程之间的通信 —— 这在过去基本依靠网络中转实现 在之前一篇文章里尝试了跨浏览器的数据共享,最后提到使用LocalConnection还可以实 ...
- JavaScript 跨域：window.postMessage 实现跨域通信
JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...
- 使用 JSONP 实现跨域通信
简介 Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的 ...
- iframe跨域通信方案
概述 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首先什么 ...
- JavaScript系列----AJAX机制详解以及跨域通信
1.Ajax 1.1.Ajax简介 Ajax简介这一部分我们主要是谈一下ajax的起源,ajax是什么?因为这些是跟技术无关的.所以,大多细节都是一笔带过. Ajax的起源? Ajax一词源于2005 ...
- iframe跨域通信实战
"长时间不写文章,开头的方式总是那么出奇的相似",最近很忙,好久没写博客了啊(是不是?). 更换工作已经有三个月有余,这段三个月把过去三年没加过的班都加了一次.收获挺多,发现的问题 ...
- 使用JSONP实现跨域通信
引语 Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索.Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索.由于受到浏览器的限制,该方法不允许 ...
- Web 跨域请求(OCRS) 前端解决方案
1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.j ...
- 使用HTML5 的跨域通信机制进行数据同步
离线应用系统的设计目标就是在网络离线情况下依然可以操作我们的应用系统,并在网络畅通的情况下与服务器进行数据交互. 所以离线应用系统最终会做成类似C/S架构的客户端应用程序.这边基于Chrome或者 S ...
随机推荐
- RMAN异机恢复实验---转载
一.RMAN异机恢复实验 2011年3月23日00:44 1.环境介绍: 主机1: 操作系统 REDHAT5.5 IP地址 172.16.1.120 主机名 sigle 数据库版本 10.2.0.4 ...
- PCB 全景图技术实现
为了对3D模型理解更透,这里采用threejs(WebGL第三方库)实现,刚开始学习入门,为了能看明白基本上每行代码都注释. 如果仅仅是为了实现全景图,可以用photo-sphere-viewer.j ...
- 胜利大逃亡(续)(bfs)
http://acm.hdu.edu.cn/showproblem.php?pid=1429 #include <stdio.h> #include <queue> #incl ...
- 想要学好C/C++，我到底要看多少书才能成为一个合格的C/C++工程师？
如何学好C语言 这可能是很多朋友的问题,我以前也有这样的感觉,编程编到一定的时候,发现能力到了瓶颈,既不深,也不扎实,半吊子.比如:你长期地使用Java和.NET ,这些有虚拟机的语言对于开发便利是便 ...
- go之数据类型转换和类型断言
一.类型转换 1.1 简单类型转换 格式 valueOfTypeB = typeB(valueOfTypeA) int 转 float64 package main import "fmt& ...
- 用CSS伪类制作一个不断旋转的八卦图？
前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分 <!DOCTYPE html> <html> <head> ...
- 如何通过putty软件远程登录并且控制linux平台
准备备工作: 下载putty远程登录软件,图标如下 打开linux主机. Linux主机准备条件: 1 配置IP ,如果大家使用虚拟机的话建议通过vm1或者vm8进行与本地真实机进行连接,同时注意要避 ...
- Android 新浪微博开放平台应用 android签名怎么获得
方法一: 通过命令行,直接生成MD5值 keytool -list -v -keystore keystorefile -storepass 其中keytool为jdk自带工具:keystorefil ...
- oracle中sum求和问题
如列表所示:都是选填字段name age salary weight张三 18 20李四 17王五 21燕小六 15 22 sum(age+salar ...
- 远程连接Oracle设置
1:打开net manager:开始->程序->oracle->配置和移植工具->Net Manager 2:添加服务器名->名子自定义,一般根据项目自定义,自己知道就行 ...