HTML5 的 History.js - 需要进行黑客攻击才能不破坏 IE7

标签 history.js

我的目标是仅支持 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 等较旧的浏览器不支持 native JSON 并且 History.js 插件需要 JSON.parseJSON.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 的片段:

/**
 * History.js Core
 * @author Benjamin Arthur Lupton <<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="41222e2f352022350123202d3431352e2f6f222e2c" rel="noreferrer noopener nofollow">[email protected]</a>>
 * @copyright 2010-2011 Benjamin Arthur Lupton <<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="06656968726765724664676a73767269682865696b" rel="noreferrer noopener nofollow">[email protected]</a>>
 * @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 只会导致错误。

最佳答案

以下内容在 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>

关于HTML5 的 History.js - 需要进行黑客攻击才能不破坏 IE7,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11549661/

相关文章:

ember.js - Html4 浏览器不支持来自 HTML5 的 History API 的 history.pushState 和 history.replaceState 方法

php - 序列化数组并通过 get 方法传递它的最佳方法是什么

javascript - 如果函数已经在 statechange - js 上运行,则延迟函数

url - html 4 浏览器 (IE) 中的 History.js PushState 错误地更改了 url

javascript - HTML5 History API 初始加载问题

reactjs - getUserConfirmation 提示带历史重定向的 React Router

javascript - 在 Chrome/Safari 中使用 History.pushState 复制历史条目

jquery - 通过 History API 使用后退和前进按钮

javascript - 使用 History.js 单击后退按钮时恢复内容

javascript - History.js onstatechange 在 IE7 中不起作用