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

我的目标是仅支持HTML5浏览器的AJAX历史记录。但是，我希望我的网站能够使用HTML4浏览器，但是没有AJAX历史记录。HTML5的History.js - Hack不需要打破IE7

许多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和历史.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 }; 
}

这似乎工作，但感觉像一个破解。有一个更好的方法吗？

编辑：7/31/2012

如果我不包括history.html4.js它仍然使我对IE7的错误。看来，包括json2.js只是此时插件的一个要求。如果没有，可以改进静默检查JSON支持并禁用该插件，但现在我有一个解决方法。下面是一个History.js SNIPPIT：

/** 
* History.js Core 
* @author Benjamin Arthur Lupton <[email protected]> 
* @copyright 2010-2011 Benjamin Arthur Lupton <[email protected]> 
* @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只会导致错误。

来源

2012-07-18 dana

如果您不包含history.html4，会发生什么情况？从源头上看，它看起来像只是默默不会初始化... – 2012-07-31 06:41:52

这是我如何解决它为我的情况。我想尽可能使用公共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年6月25日

在后续项目中我只是一个包含缩小的版本json2.js到我的组合JS文件。使用谷歌的Closure Compiler，你可以把它降到3K左右（在HTTP压缩之前），这似乎是可以接受的。

来源

2012-08-01 16:25:09 dana

我下面的作品在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-31 23:39:00

我可以看到这将如何工作，但我们有点做同样的事情。不同的是，您正在通过第二个HTTP请求加载History.js库，并将库和JSON测试都发送到一个有效负载中。 – dana 2012-08-01 04:57:28

@dana是的，我同意。这不是理想的，但它*会解决IE7抛出的错误。如果你把它放在一个“文档就绪”的事件中，那么它会让你的页面看起来更快加载，这对非IE7访问者来说可能是一个奖励。 – 2012-08-01 06:45:22

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

回答

相关问题