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;
}

JSON.parseこれは、IE7などの古いブラウザーがネイティブJSONをサポートしておらず、History.jsプラグインがとを必要とするという事実を除いては機能しているように見えますJSON.stringify。

推奨される解決策は、json2.js（リンク）を含めることです。ネイティブJSONをサポートpushState()し、サポートする必要があるHTML5ブラウザーなので、これは私にはちょっと奇妙に思えます。popState()また、本当に必要のない別のライブラリを含めたくありません。私の解決策は、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コードを1つのインクルードファイルに結合したいと思いました。コードは次のようになります。

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つのペイロードで送信できます。私が理解していることから、リソースファイルを組み合わせるのは良い習慣です。

編集：2013-06-25

以降のプロジェクトでは、の縮小バージョンをjson2.js結合されたJSファイルに含めただけです。GoogleのClosureCompilerを使用すると、許容できると思われる約3K（HTTP圧縮前）まで下げることができます。

于 2012-08-01T16:25:09.450 に答える