我已經找遍了這個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瀏覽器(如果google
的MapsLoaded
模塊中已經存在,然後檢測)只加載。這確實奏效,但不愉快,我寧願找到路線原因。
其他信息:我使用RequireJS進行模塊加載。
事情我已經嘗試:
- 使用的谷歌地圖的URL參數
async=2
(如建議here) - 追加到
body
而不是head
(如在谷歌API的例子) - 在
$.ready
通話
配售一切
謝謝
通過快速連續兩次將加載腳本添加到頭部(在有機會加載第一個頭部之前),讓Chrome獲得相同的結果。 –
然後在IE Developer Tools中查看元素檢查器,它將加載兩份Google Maps'main.js'文件...... –
如果我用'if(typeof google ==='undefined'){...}'包圍Promise塊中的所有內容並在IE中將緩存打開,那麼所有工作都可以使用。 –