js中跨域问题 | 易学教程

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

一、什么叫做js跨域

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

二、哪些情况算作跨域

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

三、如何解决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方法。

来源：oschina

链接：https://my.oschina.net/u/2250599/blog/789664

标签

iframe