说到JS的跨域问题,我们先来看看那些是不会产生跨域问题的:
www.a.com/a.js
www.a.com/b.js
这是同一个域名下面的两个JS文件,不会产生跨域问题。即便两个JS文件不在同一个文件夹下面也是不会产生跨域的问题的
***********
其他情况下基本都是会产生跨域问题的
1.主域和子域之间就是会产生跨域的问题的
eg: www.a.com和 b.a.com(域名越低就写在左边,域名越高的写在右边)
2.不同域名下面肯定会产生跨域的问题的(即便两个域名指向同一个IP地址也是存在跨域的问题的)
******
存在跨域的问题,那么AJAX里面的XMLHttpRequest()对象就不能使用了
**********
如何去解决跨域问题呢?
1.对于主域和子域之间的情况下:
解决方案: 子域和主域之间都设置 document.domain='主域名'
2.不同域名下面的:
(1)解决方案:服务器代理进行解决的(通过XMLHttpRequest代理文件进行解决的)
优点:做到任何你想要的数据交互
缺点:增大服务器的压力
(2)script标签:简称:jsonp
解决方案:将src里面的内容当作请求地址就可以了(里面的数据格式需要是json或者是js)
需要注意的就是其中的script标签需要注意顺序问题(假如在b网站里面需要访问a网站里面的数据,那么其中的a网站的script标签应该在b网站script标签下面)
<!DOCTYPE html>
<html>
<head>
<title>对于跨域问题的理解</title>
<meta charset="utf-8">
<script>
function box(json){
alert(json.name);
}
</script>
<script type="text/javascript" src="jsonp.js"></script>
</head>
<body>
</body>
</html>
//下面的就是其中的jsonp.js里面的代码
box({name:'liy'});
如果将其中的两个代码块的位置进行交换 其中就不会弹出name的值,这里就牵扯到js代码执行的顺序的问题了(这里面的函数相当于JAVA里面的对象的构造函数)
需要注意的就是其中的函数的名字和jsonp里面的充当盒子的那个东西的名字保持一致
可以利用callback来改变对应的jsonp里面充当盒子的那个东西的名子
(3)location的hash值来解决跨域问题
<iframe src="xxx,php#key1=value1&key2=value2" ></iframe>
.1 片段识别符
片段标识符(fragment identifier)指的是,URL的#
号后面的部分,比如http://example.com/x.html#fragment
的#fragment
。如果只是改变片段标识符,页面不会重新刷新。
父窗口可以把信息,写入子窗口的片段标识符。
var src = originURL + '#' + data; document.getElementById('myIFrame').src = src;
子窗口通过监听hashchange
事件得到通知。
window.onhashchange = checkMessage; function checkMessage() { var message = window.location.hash; // ... }
同样的,子窗口也可以改变父窗口的片段标识符。
parent.location.href= target + "#" + hash;
(4)window.name来解决
eg: www,a,com/c1.html
www.b.com/c2.html window.name="数据"
这里面需要的就是一个代理,因此我们创建一个www.a.com/代理.html.代理html文件和window.name公用一组数据,又因为代理html和c1.html在同一个域里面,所以就达到了跨域访问数据的目的了
(5)通过falsh来解决跨域的问题
(6)html5t提供的postMessage的方法
script是单域操作的,hash是双域操作的,window.name是比较安全的,因为对应的值是写在window,name里面的