JavaScript跨域

产生跨域的情况

  1. 同一域名,不同端口;
  2. 同一域名,不同协议;
  3. 同一域名,不同二级域名;
  4. 主域相同,子域不同;
  5. 不同域名;
  6. 使用与域名对应的IP;

对于最后一种,判断为跨域是因为:域是通过‘URL的首部’来识别而不会去尝试判断相同的IP地址是否对应同一个域。

URL首部指window.location.protocol+window.location.host

另外,如果是协议和端口造成的跨域问题,前端没有办法解决。

JavaScript解决方案

1.document.domain+iframe

该方法只能解决上面的第四种情况,在两个不同域的文件中,分别加上:

document.domain = 'a.com';

然后通过在其中一个文件中创建一个iframe,控制iframe的contentDocument进行js的交互。

//www.a.com/a.html  
var ifr = document.createElement('iframe');
ifr.src = http://Script.a.com/b.html;
document.appendChild(ifr);
ifr.onload = function(){
    var doc = ifr.contentDocument||ifr.contentWindow.document;
    //通过doc操作b.html
}

备注:domain 默认等于window.location.hostname。主域名是不带www的域名(a.com)。domain只能设置成主域名。

2.动态创建script(jsonp)

浏览器并不禁止页面中引用并执行其他域的js文件,所以可以通过创建script节点实现完全跨域通信。

//这里js是引用了其他域的script节点。
js.onload = function(){
    if(!this.readyState||this.readyState==='loaded'){
        //执行返回来的callback
    }
}
3.location.hash

原理是利用location.hash来进行传值(在url:http://a.com#helloworld中的#helloworld就是location.hash)。因为改变hash并不会导致页面刷新,但是传递的数据容量是有限制的。

4.window.name

利用window 的 name 属性实现跨域的原理是:name属性在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)。换句话说,name属性不会因为页面的url变化而变化。

在需要请求的目标页面target.html中设置window.name

 //target.html
window.name = '想要获取的信息';

因为name值只对位于同一域下的页面可见。为解决这一限制,在源页面中利用iframe,使iframe加载目标页面,这时源页面中的iframe的window.name就会等于target.html的window.name。

但是,源页面依然无法获取到iframe的window.name属性,因为源页面和其中的iframe不同源。所以这时需要把iframe的url重新指向与源页面同域的proxy.html页面。

iframe = document.createElement('iframe'),
iframe.src = 'http://localhost:8080/data.php';
document.body.appendChild(iframe);
iframe.onload = function() {
  iframe.src = 'http://localhost:81/cross-domain/proxy.html';
  console.log(iframe.contentWindow.name)
};

这样就能获取到target.html中保存于window.name的数据了

5.使用HTML5的 postMessage

postMessage()是HTML5新增的API,具体来看MDN的描述:HTML5 Window.postMessage()

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 0. 结论哈哈哈 主域相同可以设置document.domain 使用JSONP动态创建script 利用ifra...
    公子七阅读 4,844评论 0 6
  • 1. 什么是跨域? 跨域一词从字面意思看,就是跨域名嘛,但实际上跨域的范围绝对不止那么狭隘。具体概念如下:只要协议...
    w_zhuan阅读 3,607评论 0 0
  • 1. 什么是跨域? 跨域一词从字面意思看,就是跨域名嘛,但实际上跨域的范围绝对不止那么狭隘。具体概念如下:只要协议...
    他在发呆阅读 4,221评论 0 0
  • 在前端的JS请求中,跨域的问题经常存在,根据不同的实现原理,常见的跨域的方法如下: 一:前端的方式 1:在前端页面...
    Arno_z阅读 1,823评论 0 0
  • ROS中通过RVIZ可视化机器人导航情况,其中,URDF(Unified Robot Description Fo...
    PIBOT导航机器人阅读 8,989评论 0 3

友情链接更多精彩内容