2

我的目标是仅支持 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（链接）。这对我来说似乎有点奇怪，因为支持pushState()并且popState()应该也支持原生 JSON 的 HTML5 浏览器。此外，我不想包含另一个我并不真正需要的库。我的解决方案是有条件地包含 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 的一个片段：

/**
 * 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 只会导致错误。

4

2 回答 2

4

以下在 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>
于 2012-07-31T23:39:00.713 回答
0

这是我为我的情况解决的方法。我想尽可能使用公共 CDN，并将我网站的所有其他 JS 代码合并到一个包含文件中。这是代码的样子。

页面.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 包含文件结合了所有需要的插件和运行站点所需的任何自定义代码。

网站.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 个有效负载中。据我了解，合并资源文件是一种很好的做法。

编辑：2013-06-25

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

于 2012-08-01T16:25:09.450 回答