js中跨域问题

1、什么叫作js跨域

javascript为了安全着想，在ajax以及iframe中不容许跨域调用。

2、哪些状况算做跨域

1.协议名称不一样

     从http://www.test.com中调用https://www.test.com

2.端口不一样

     从http://www.test.com调用http://www.test.com:9999

3.域名不一样 

   从http://www.test.com调用http://login.test.com

  从http://www.test.com调用http://www.test2.com

3、如何解决js跨域

1.使用jsonp

        在js中，咱们直接用XMLHttpRequest请求不一样域上的数据时，是不能够的。可是，在页面上引入不一样域上的js脚本文件倒是能够的，jsonp正是利用这个特性来实现的。 例如：

<script type="text/javascript">
    function dosomething(jsondata){
        //处理得到的json数据
    }
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>

   

jsonp就是回调函数+数据。callback({"name":"Tom"})典型的jsonp。js文件载入成功后会执行咱们在url参数中指定的函数，而且会把咱们须要的json数据做为参数传入。

若是你的页面使用jquery，那么经过它封装的方法就能很方便的来进行jsonp操做了。

<script type="text/javascript">
    $.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){
        //处理得到的json数据
    });
</script>

jquery会自动生成一个全局函数来替换callback=?中的问号，以后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的做用。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。

   优势：原生支持，比较老的游览器也都支持。缺点：只支持GET方式，不支持POST方式

2.CORS方式

经过修改document.domain来跨子域

document.domain的设置是有限制的，咱们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。

1.在页面 http://www.example.com/a.html 中设置document.domain:

<iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe>
<script type="text/javascript">
    document.domain = 'example.com';//设置成主域
    function test(){
        alert(document.getElementById('iframe').contentWindow);//contentWindow 可取得子窗口的 window 对象
    }
</script>

2.在页面 http://example.com/b.html 中也设置document.domain:

<script type="text/javascript">
    document.domain = 'example.com';//在iframe载入这个页面也设置document.domain，使之与主页面的document.domain相同
</script>

修改document.domain的方法只适用于不一样子域的框架间的交互。

使用window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的全部的页面都是共享一个window.name的，每一个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的全部页面中的

使用HTML5的window.postMessage方法跨域

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可使用它来向其它的window对象发送消息，不管这个window对象是属于同源或不一样源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。