在 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>

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

我知道我可以尝试并添加很多尝试和捕获（已经有几个），但问题是主要客户端将使用客户端之间的混合。 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 标签指定了 html-tag 的 id）：

$('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 的内容时常见的内容“闪烁”。

Answer 2

一个简单的解决方案是检测所有不兼容的浏览器并显示消息以升级其浏览器或重定向到非 js 站点，例如：

for IE5 and 6
if ($.browser.msie && $.browser.version <= 6){
    //show my message here
}