Question

以下代码适用于Chrome和IE（8），但firefox表示“叠加未定义”。使用this.overlay或[this.overlay]也不起作用。导致差异的原因以及如何在Firefox中修复它？

代码：

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

提前致谢。

修改解决方案独立工作（JSfiddle），但是当我在项目中使用代码时，它会失败。这绝对没有意义。看到这个screencap mashup： Image link

编辑＃2：

将我的脚本标记移动到DOM的底部修复了所有内容。我不知道为什么我没想到这一点。这可能是从一开始就存在的问题 - 即使有关闭问题，Chrome和IE也能更好地处理我的愚蠢行为。

但是，自从我收到您的回复后，我现在编写更安全的代码，并知道如何正确访问对象内的对象属性。谢谢！

Answer 1

就像在引用方法时一样，只需要在引用“overlay”时添加对象作用域。

所以在你的函数中只做“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加载完成后只获得'overlay'元素。

您可以通过document.ready模式执行此操作，或者您可以在“ol”函数中执行延迟加载模式。我建议使用document.ready模式并更改你的'ol'对象，使overlay默认为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.

从功能属性访问对象属性在Firefox中不起作用

2 个答案: