JS的跨域问题

说到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里面的

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值