在javascript崩溃时显示备选方案的最佳方法

Question

我正在寻找一种非常通用的方法来为Javascript繁重的站点提供替代站点(链接转到旧的静态站点).

我目前的实施是:

//<Some JS/HTML>
$(document).ready(function() {
    //<Some JS Code>
    $('#error').attr('style','display: none;');
});
//<Some html>
<div id="error">
        <span>If you can see this, that means something went very very wrong. Click <a href="somelink.php">Here</a> to use the old portal. Please contact some@email.com with this error and provide as much information as possible, thank you :) </span>
</div>

我目前的问题是,这是在网站加载时可见:(.有更好的方法吗？

我知道我可以尝试添加大量的trys和catchs(已经有几个),但问题是主要客户端将使用两者之间的混合客户端.FF2-FF3,介于两者之间的所有版本,以及IE5-IE6.IE5我只是放置一个消息框和重定向,如果他们试图加载网站,我甚至不会尝试使兼容.

而这些旧的浏览器只是与某些东西不兼容....我知道我可以添加.onerror,但FF直到FF6才增加兼容性,这对于大多数客户来说是新的.(虽然很奇怪,IE5.5有它)

注意:我只是jQuery 1.7.1当前操作的基本流程就是当它完成加载初始的javascript它隐藏div.

Answer 1

为此,您可以主要使用带有JS帮助程序的CSS.

把这个JS代码放在文档的顶部,因为你敢于在charset声明之后.您需要在此行之前包含jQuery,或者您可以使用标准JS(document.getElementByID('html-tag').className='js';,假设您已为html标记指定了id html-tag):

$('html').addClass('js');

然后你可以编写你的CSS来考虑JS可能有或没有可用的事实:

#error {
    display : block;/*if no JavaScript is available then show this element*/
}
.js #error {
    display : none;/*if JavaScript is available then hide this element*/
}

这是一个演示:http://jsfiddle.net/x4tjL/(JSFiddle现在似乎遇到了问题,这里是一个JSBin:http://jsbin.com/ahezuc/edit#preview)

更新

将JavaScript代码放在文档顶部附近而不将代码包装在document.ready事件处理程序中,可以最大限度地减少在尝试隐藏/显示基于JS的内容时常见的内容"闪存".