Question

我的目标是仅支持HTML5浏览器的AJAX历史记录。但是，我希望我的网站能够使用HTML4浏览器，但没有AJAX历史记录。

许多History.js示例在执行任何操作之前都包含以下检查：

if (!History.enabled) {
    // History.js is disabled for this browser.
    // This is because we can optionally choose to support HTML4 browsers or not.
    return false;
}

除了IE7等旧版浏览器不支持原生JSON且History.js插件需要JSON.parse和JSON.stringify这一事实外，这似乎有效。

建议的解决方案是包含json2.js（link）。这似乎有点奇怪，因为支持pushState()和popState()的HTML5浏览器也应该支持本机JSON。另外，我不想包含另一个我不需要的库。我的解决方案是有条件地将History.js包括在内：

var nativeJSON = (typeof JSON === 'object') && (typeof JSON.parse === 'function') && (typeof JSON.stringify === 'function');
if (nativeJSON) {
    /// Include contents of: balupton-history.js-e84ad00\scripts\bundled\html5\jquery.history.js
} else {
    window.History = { enabled: false };
}

这似乎有效，但感觉就像一个黑客。有一个更好的方法吗？

编辑：2012年7月31日

如果我不包含history.html4.js，它仍会在IE7上给我一个错误。看来包含json2.js只是此插件的一个要求。可能会进行改进以静默检查JSON支持并禁用插件（如果没有），但是现在我有一个解决方法。这是来自History.js的snippit：

/**
 * History.js Core
 * @author Benjamin Arthur Lupton <contact@balupton.com>
 * @copyright 2010-2011 Benjamin Arthur Lupton <contact@balupton.com>
 * @license New BSD License <http://creativecommons.org/licenses/BSD/>
 */

(function(window,undefined){
    "use strict";

    // ========================================================================
    // Initialise

    // Localise Globals
    var
        console = window.console||undefined, // Prevent a JSLint complain
        document = window.document, // Make sure we are using the correct document
        navigator = window.navigator, // Make sure we are using the correct navigator
        sessionStorage = window.sessionStorage||false, // sessionStorage
        setTimeout = window.setTimeout,
        clearTimeout = window.clearTimeout,
        setInterval = window.setInterval,
        clearInterval = window.clearInterval,
        JSON = window.JSON,
        alert = window.alert,
        History = window.History = window.History||{}, // Public History Object
        history = window.history; // Old History Object

    // MooTools Compatibility
    JSON.stringify = JSON.stringify||JSON.encode;
    JSON.parse = JSON.parse||JSON.decode;

如果未定义window.JSON，则引用window.JSON.stringify只会导致错误。

Answer 1

以下适用于IE7，没有错误：

<html>
<head>
    <title>Testing</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        // Tell us whether History is enabled
        var alertHistory = function() {
            alert(History.enabled ? 'enabled' : 'disabled');
        }

        var nativeJSON = (typeof JSON === 'object') && (typeof JSON.parse === 'function') && (typeof JSON.stringify === 'function');
        if (nativeJSON) {
            // Native JSON is present, add History.js
            var historyJs = document.createElement('script');
            historyJs.type = 'text/javascript';
            historyJs.src = 'https://raw.github.com/browserstate/history.js/master/scripts/bundled/html5/jquery.history.js';
            historyJs.onload = alertHistory;
            document.getElementsByTagName("head")[0].appendChild(historyJs);
        } else {
            window.History = { enabled: false };
            alertHistory();
        }
    </script>
</head>
<body>

</body>
</html>

Answer 2

以下是我为我的案例解决的问题。我希望尽可能使用公共CDN，并将我网站的所有其他JS代码合并到一个包含文件中。这是代码的样子。

<强> page.html中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Page Title</title>

    <!-- JS Files Hosted on CDN(s) -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <!-- Combined Custom JS File -->
    <script type="text/javascript" src="js/site.js"></script>

</head>
<body>

</body>
</html>

单个JS包含文件结合了所有需要的插件和运行站点所需的任何自定义代码。

<强> Site.js

// History.js plugin
var nativeJSON = (typeof JSON === 'object') && (typeof JSON.parse === 'function') && (typeof JSON.stringify === 'function');
if (nativeJSON) {
    // contents of browserstate-history.js-e84ad00\scripts\bundled\html5\jquery.history.js
} else {
    window.History = { enabled: false };
}

/*
Watermark v3.1.3 (March 22, 2011) plugin for jQuery
http://jquery-watermark.googlecode.com/
Copyright (c) 2009-2011 Todd Northrop
http://www.speednet.biz/
Dual licensed under the MIT or GPL Version 2 licenses.
*/
// contents of jquery.watermark.min.js


// INCLUDE more plugins here


// Custom JS Code here

我很可能想要发送至少一些自定义JS代码，这允许我以1个有效载荷发送它。根据我的理解，combine resource files是好的做法。

编辑：2013-06-25

在后续项目中，我只是将json2.js的缩小版本包含在我的组合JS文件中。使用Google Closure Compiler，您可以将其降低到大约3K（在HTTP压缩之前），这似乎是可以接受的。

HTML5的History.js - Hack需要不破坏IE7

2 个答案: