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所指向的對象都是一個靜態資源。瀏覽器會在適當的時候去主動載入這些資源，而不會出現跨域問題。

但是對於不同的瀏覽器，對圖片載入是否完成有不同的支援。具體的實現請參照我上面的代碼。