javascript 跨域问题解决办法总结
跨域的意思就是不同域名之间的页面默认是无法通信的。因为浏览器默认是禁止跨域的;
图所示:chrome浏览器尝试获取mainFrame失败,提示DomException
1).假如你有个网站 a.com 中有个iframe的连接指向的是http://www.baidu.com,那么你想获取iframe中元素id为text1的值,通过js是无法获取到的。
办法: location.hash ,ifame
2).再换一种情况。 a.a.com 中有个iframe的src指向的是b.a.com,同家族a.com下的不同2级域名,在a.a.com中使用js也是无法获取到b.a.com中的内容。
办法:document.domain+iframe
下面是常用的解决跨域的办法
1..document.domain+iframe 的设置
适用同一家族下的2个子域名 a.a.com ,b.a.com 以及a.com ,script.a.com
domain必须设置为a.com,及等于window.location.hostname
a.a.com 想引用 b.a.com html代码中的值
可以在 a.a.com 和b.a.com下面都加上伪域名 a.com,接着在a.a.com中动态创建iframe
1)在b.b.com中加入
<script type=”text/javascript” >
document.domain = "a.com";
</script>
2)接着在a.a.com中加入script 代码,通过 iframe的contextDocument获取b.a.com中的值
<script type=”text/javascript” >
document.domain = 'a.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.a.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
var doc = ifr.contentDocument || ifr.contentWindow.document;
// 在这里操纵b.html
alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};
</script>
a.a.com通过下面代码获取b.a.com窗口的高度
var h = window.navigator.userAgent.indexOf("MSIE") > 0 ? document.body.scrollHeight : document.documentElement.scrollHeight;
parent.parent.document.getElementById('name').height = h;
两个不同的子域名伪装成了同域,完全在同源策略的保护下进行通信
2. location.hash ,ifame (弊端:远端的数据页面,你要协调好,必须得放一段js)
可以解决不同主域名下的数据通信,但是hash有长度限制,数据暴露,数据类型有限制
子窗口无法改变无窗口的hash值,除非是同一域名下的
www.baidu.com#abc 就是location.hash
假如a.com要使用b.com中的值。
1)首先a.com创建iframe,并指向 b.com#parms
a.com用js定时检测iframe中src中的location.hash是否改变了,如果改变则获取其值则获取新location.hash值。
IE,chrome浏览器不支持跨域修改parent.location.hash值,所以需要代理。但是firefox支持修改。
a.com中的代码
<script>
function startRequest(){
var ifr = document.createElement('iframe');
ifr.style.display = 'none';
ifr.src = 'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo'; //根据paramdo来决定获取啥值
document.body.appendChild(ifr);
}
//每2秒检测一次,是否变动了值
function checkHash() {
try {
var data = location.hash ? location.hash.substring(1) : '';
if (console.log) //console.log javascript中调试输出信息,比alert好
{
console.log('Now the data is '+data);
}
} catch(e) {};
}
setInterval(checkHash, 2000);
</script>
b.com页面的代码如下
//模拟一个简单的参数处理操作
switch(location.hash){
case '#paramdo':
callBack();
break;
case '#paramset':
//do something……
break;
}
//设置a.com iframe src的location.hash
function callBack(){
try {
//此时是火狐正常执行
parent.location.hash = 'somedata';
} catch (e) {
// ie、chrome的安全机制无法修改parent.location.hash,
// 所以要利用一个中间的cnblogs域下的代理iframe
var ifrproxy = document.createElement('iframe');
ifrproxy.style.display = 'none';
ifrproxy.src = 'http://a.com/test/cscript/cs3.html#somedata'; // 注意该文件在"a.com"域下
document.body.appendChild(ifrproxy);
}
}
a.com域名下 cs3.html中的代码
//因为parent.parent和自身属于同一个域,所以可以改变其location.hash的值
parent.parent.location.hash = self.location.hash.substring(1);
3. window.name + ifame (弊端:远端的数据页面,你要协调好,必须得放一段js)
http://www.cnblogs.com/StudyLife/p/3515357.html
总结:
location.hash 在 主页面a.com中设置'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo' (#paramdo为location.hash,不会随页面刷新改变)。并在a.com页面js每隔一段时间就去检测#paramdo是否被改变了,如果被改变了,说明获取到数据了。
最新文章
- python读取文件夹
- SQL Server 2012 开发新功能 序列对象(Sequence)(转)
- 基于netty-socketio的web推送服务
- GROUP函数-GROUP_ID,GROUPING,GROUPING_ID
- Python-类变量,成员变量,静态变量,类方法,静态方法,实例方法,普通函数
- CoreAnimation方法汇总
- JavaScript 判断一个对象的数据类型。
- Google 以图搜图 - 相似图片搜索原理 - Java实现
- springMVC controller间跳转、重定向、传参
- MongoDB入门学习(一)—— 安装和启动
- 为什么ajax 必须同源,same origin policy
- intellij idea 常用快捷键mac版
- February 12th, 2018 Week 7th Monday
- P2123 皇后游戏
- Luogu4173 残缺的字符串 FFT
- centos7上为什么不使用libcgroup进行资源限制
- 深入浅出javascript(二)函数和this对象
- LRU缓存淘汰算法
- 使用HttpModule实现网址重写和HttpHandler实现页面静态化冲突的解决办法
- 【cf492】E. Vanya and Field(拓展欧几里得)
热门文章
- springcloud zuul
- Python基础-常用的内置函数
- PL/SQL不能格式化SQL:--PL/SQL Beautifier could not parse text
- 最小化CentOS6.7(64bit)---安装mysql5.5、jdk、tomcat
- 从yum源下载软件包
- 浅谈HTTPS协议
- Linux Shell编程 sort、wc命令
- I.mx6s上移植wm8960驱动(基于linux3.0.101版本)
- linux alsa pcm(此pcm非硬件pcm接口)
- linux的文件,目录操作命令(mv,rm,cp)