從函數屬性訪問對象屬性在Firefox中不起作用

Question

下面的代碼適用於Chrome和IE（8），但firefox說「覆蓋未定義」。 使用this.overlay或[this.overlay]也不起作用。是什麼導致了這種差異，以及如何在Firefox中修復它？

代碼：

​​

在此先感謝。

編輯： 的解決方案獨立工作（JSfiddle），但是當我在我的項目中使用的代碼失敗。這絕對沒有意義。看到這個擷取畫面混搭： Image link

編輯＃2：

移動我的腳本標籤DOM的底部固定的一切。我不知道爲什麼我沒有想到這一點。這可能是一開始的問題 - Chrome和IE即使在關閉問題時也能更好地處理我的愚蠢行爲。

但是，由於我收到您的回覆，我現在寫出更安全的代碼，並知道如何正確訪問對象內的對象的屬性。謝謝！

Answer 1

就像您在引用方法時所做的一樣，您只需在引用「疊加」時添加對象範圍。

所以在你的功能只是做「ol.overlay.style.display」，你應該沒問題。

var ol = { 
    overlay: document.getElementById("overlay"), 
    build: function(e){ 
     //todo: build elements dynamically 
    }, 
    open: function(){ 
     ol.overlay.style.display = "block"; 
     centerVertically(); 
     ol.build(); 
    }, 
    close: function(){ 
     ol.overlay.style.display = "none"; 
    } 
}; 
ol.open(); 

你現在擁有它的方式是在'ol'對象範圍之外尋找一個全局JS變量。

編輯正如@Matt Ball在下面的評論中提到的（我想補充說的）。當DOM完成加載時，您應該確保只獲取「覆蓋」元素。

你可以通過document.ready模式來做到這一點，或者你可以在你的'ol'函數中做一個懶加載模式。我建議使用document.ready模式並更改'ol'對象以使覆蓋默認爲null，並在準備好的文檔中定義它（或將它放在您調用文檔的init類型方法中），這兩種方法都沒問題。

Answer 2

這應該只是正常工作在所有瀏覽器，假設有ID爲overlay頁面上的元素：

var ol = { 
    overlay: document.getElementById("overlay"), 
    build: function (e) { 
     //todo: build elements dynamically 
    }, 
    open: function() { 
     this.overlay.style.display = "block"; 
     this.centerVertically(); 
     this.build(); 
    }, 
    close: function() { 
     this.overlay.style.display = "none"; 
    }, 
    centerVertically: function() { 
     // snip 
    } 
}; 

只要你調用的函數是這樣的：

ol.open(); 
// or 
ol.close(); 
// or 
ol.build(); 

和不是這樣（這將使this在各種功能中不參考ol）：

var openFn = ol.open(); 
openFn(); 
// etc. 

最新問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相關問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.