Question

分辨

我发现了这个问题并且很遗憾地说这是非常愚蠢的。在某些页面上，在脚本类型= javascript之后有一个额外的结束括号。显然Chrome和Firefox忽略了这个问题，但Safari和IE引发了显示错误。感谢大家对此事的出色支持和指导。值得注意的是，我决定使用.show（）方法，因为它似乎最符合逻辑。

我的页面顶部有以下javascript代码段，用于验证登录表单中的2个字段：

<script type="text/javascript">
    $(function() {

        $('#submit').click(function () {

            $('#login_form span').hide();

            if ($("input#user").val() == "") {
                $("span#user").show();
                $("input#user").focus();  
                return false;  
            }

            if ($("input#pw").val() == "") {
                $("span#pw").show();
                $("input#pw").focus();  
                return false;  
            }

            var overlay = $('<div id="overlay">');
            $('body').append(overlay);
        });
    });
</script>

当提交表单（单击提交）时，将运行该功能，检查以确保2个字段：pw和user有一些内容。如果他们这样做，它会打开一个覆盖屏幕的覆盖脚本。上面的功能位于我的屏幕顶部（头部）

叠加层的CSS是：

#overlay { background:#000 url(../images/loader.gif) center no-repeat; opacity:0.5; filter:alpha(opacity = 50); width:100%; height:100%; position:absolute; top:0; left:0; z-index:1000; }

在Chrome中：该功能运行良好，但叠加层中的“加载”图像不显示。

在Firefox中：几乎与Chrome相同，但如果在页面底部进行javascript调用，则加载图片可以正常工作。

在IE中：如果函数保留在头部，我的页面完全空白（虽然没有服务器错误）。一旦我移动到页面底部，加载图像就会随机出现，如果是，它的动画速度非常慢。

也许我做错了什么但是尝试为所有三个浏览器构建一个简单的东西让我变得疯狂。

有任何改进建议吗？

提前致谢。

更新

首先，谢谢大家对你的建议。我已经尝试并编号并从每个结果获得各种结果（以及在本地运行时与在我们的apache服务器上运行时的不同结果）。

特别是愤怒的一页是这样的： https://www.nacdbenefits.com/myadmin/password-reset

在IE中，页面只会打开灰色屏幕。我已经更新了代码以在页面本身中嵌入div id并简单地在提交上“显示”但显然其他东西正在捕捉很长一段路。

更新2

其他必须导致此故障。当我将代码剥离到：

<script type="text/javascript">
    $(function() {

    });
</script>

除非我将代码移到页面底部，否则IE只会显示一个没有任何内容的黑屏（再没有服务器错误，页面底部没有JS错误）。

Answer 1

我会在页面的HTML中存在叠加但隐藏（display: none;），以便预加载背景图像。然后，点击我的按钮后，我会.show()。

Answer 2

我认为您的代码存在错误。我很惊讶Firefox设法用它做出一些东西。根据{{3}}，您应该传递一个字符串或元素。你试图传递一个jQuery选择器结果（并在那里打破一个）。请记住，在jQuery中$()是一个函数调用！比较你的代码（浓缩）：

$('body').append($('<div id="overlay">'));

这个（没有$()电话）：

$('body').append('<div id="overlay" />');

或者这（注意关闭div标签）：

$('body').append($('<div id="overlay" />'));

Answer 3

您是否考虑过将叠加层作为网页代码的一部分，但默认情况下只是display: none，然后只是.show()想要它出现？

Answer 4

可以通过在DOM准备就绪时运行绑定来修复页首/页尾不一致，如下所示：

<script type="text/javascript">
    $(document).ready(function() {

        $('#submit').click(function () {

        // code omitted for brevity

        });
    });
</script>

在overlay中需要有关Cross Browser Inconsistencies的帮助

分辨

更新

更新2

4 个答案: