js 跨域访问的问题

所谓跨域问题，是指在一个域下的页面通过JS访问另一个域下的数据对象，出于安全性的考虑，几乎所有的浏览器都不允许这种跨域的访问。

也就是说，使用ajax去访获取不同域下的内容是不被允许的。

在工作中，曾经遇到这样的问题。我需要动态的改变一个图片内容，而且如果需要的图片不存在，那么就使用默认图片。

一开始我这么做

  jQuery.get(url, { Action: "get" }, function () {
     jQuery(source).css("background-image", "url(<%=CRCHelper.CacheSvr %>/_imgs/UI/crc/login/" + imgname + "<%=CRCHelper.LanguageCode %>.png)");
       });

因为url中的值和我的网页不在一个域里，所以不能访问。

后来使用这样方式

var $imgChk = $("<img id='imgChk' src='" + url + "'></img>");
//for firefox
 $imgChk[0].onload = function () {
            if ($imgChk[0].complete == true) {
                jQuery(source).css("background-image", "url(<%=CRCHelper.CacheSvr %>/_imgs/UI/crc/login/" + imgname + "<%=CRCHelper.LanguageCode %>.png)");
            }
        };
     //ie
        $imgChk[0].onreadystatechange = function () {
            if ($imgChk[0].readyState == "complete")
            {
                jQuery(source).css("background-image", "url(<%=CRCHelper.CacheSvr %>/_imgs/UI/crc/login/" + imgname + "<%=CRCHelper.LanguageCode %>.png)");
            }
        };

问题就解决了。因为该方法是通过img来加载的。对于浏览器来说，img或者script中src所指向的对象都是一个静态资源。浏览器会在适当的时候去主动加载这些资源，而不会出现跨域问题。

但是对于不同的浏览器，对图片加载是否完成有不同的支持。具体的实现请参照我上面的代码。