2014-03-05 31 views
4

我已經找遍了這個bug並沒有發現任何可行的東西。下面的代碼:IE中的異步Google Maps加載錯誤

MapsLoader.prototype._setup = function() { 
    var promise = new RSVP.Promise(function (resolve) { 

     // Callback for Google Maps that resolves the promise 
     window.gmapsLoaded = function() { 
      console.log('[Maps Loader] Loaded'); 
      resolve(); 
     }; 

     console.log('[Maps Loader] Loading...'); 

      // Create a URL with the API key pointing to the gmapsLoaded callback 
     var mapsURL = 'https://maps.googleapis.com/maps/api/js?key=' + config.googleMaps.APIKey + '&sensor=false&callback=gmapsLoaded', 

      // Create script object 
      script = $('<script />').attr('src', mapsURL); 

     $('head').append(script); 
    }); 

    // Remove the gmapsLoaded function from global scope 
    promise.then(function() { 
     window.gmapsLoaded = undefined; 
    }); 

    // Return the promise 
    return promise; 
}; 

這是一個MapsLoader模塊,簡單地增加了在谷歌地圖腳本到head(僅在需要時)的一部分,等待谷歌地圖加載回調,然後解決了承諾(在此指出使用它的文件可以開始做東西)。

適用於Safari,Chrome,Firefox和IE10。然而,在IE 8和9,我得到一個錯誤:

  • Object doesn't support property or method 'Load'(IE9)
  • Object doesn't support property or method(IE8)

這是從main.js谷歌地圖文件的第55行未來:

k.google.maps.Load(...) 

發生這種情況「[Loader Loaded]」日誌消息,所以回調正在運行,pag除了Google地圖區域爲空白之外,e繼續正常加載。

如果我打開緩存(即不使用IE開發工具),頁面有時會第二次工作,這表明它可能是某種加載競爭條件。

我能夠通過加載在有條件的意見head谷歌地圖代碼來解決它,所以它會在所有網頁在IE瀏覽器(如果googleMapsLoaded模塊中已經存在,然後檢測)只加載。這確實奏效,但不愉快,我寧願找到路線原因。


其他信息:我使用RequireJS進行模塊加載。

事情我已經嘗試:

  • 使用的谷歌地圖的URL參數async=2(如建議here
  • 追加到body而不是head(如在谷歌API的例子)
  • $.ready通話

配售一切

謝謝

+0

通過快速連續兩次將加載腳本添加到頭部(在有機會加載第一個頭部之前),讓Chrome獲得相同的結果。 –

+0

然後在IE Developer Tools中查看元素檢查器,它將加載兩份Google Maps'main.js'文件...... –

+0

如果我用'if(typeof google ==='undefined'){...}'包圍Promise塊中的所有內容並在IE中將緩存打開,那麼所有工作都可以使用。 –

回答

3

使用$.getScript(mapsURL)(即,通過AJAX請求加載它)而不是手動將腳本附加到head似乎工作。

不知道爲什麼以這種方式加載它應該有所作爲,但它做到了。