0

下面的代码适用于 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），但是当我在我的项目中使用代码时它失败了。这完全没有意义。请参阅此屏幕截图混搭： 图片链接

编辑＃2：

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

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

4

2 回答 2

4

就像您在引用方法时所做的那样，您只需要在引用“覆盖”时添加对象范围。

所以在你的函数中只做“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 类型方法中），两者都可以。

于 2012-07-19T13:20:47.973 回答
1

这应该在所有浏览器中都可以正常工作，假设overlay页面上有一个带有 ID 的元素：

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.
于 2012-07-19T13:14:59.143 回答