我的目标是仅支持 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.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 的片段:
/**
* 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/