我正在使用 JQuery History.js plugin在 HTML5 浏览器中启用 History API 并在 HTML4 浏览器中模拟。我正在使用 Ajaxify script实现这个插件。我稍微更改了此脚本，如下所示:

var History, $, document;
function PrepareVariables() {
    History = window.History,
    $ = window.jQuery,
    document = window.document;
}

function InitHistory() {
    // Prepare Variables
    var
    /* Application Specific Variables */
    //contentSelector = '#content,article:first,.article:first,.post:first',
    contentSelector = '#navcontent';
    $content = $(contentSelector), //.filter(':first'),
    //contentNode = $content.get(0),
    $menu = $('#menu,#nav,nav:first,.nav:first').filter(':first'),
    activeClass = 'active selected current youarehere',
    activeSelector = '.active,.selected,.current,.youarehere',
    menuChildrenSelector = '> li,> ul > li',
    completedEventName = 'statechangecomplete',
    /* Application Generic Variables */
    $window = $(window),
    $body = $(document.body),
    rootUrl = History.getRootUrl(),
    scrollOptions = {
        duration: 800,
        easing: 'swing'
    };

    // Ensure Content
    if ($content.length === 0) {
        $content = $body;
    }

    // Internal Helper
    $.expr[':'].internal = function (obj, index, meta, stack) {
        // Prepare
        var
        $this = $(obj),
            url = $this.attr('href') || '',
            isInternalLink;

        // Check link
        isInternalLink = url.substring(0, rootUrl.length) === rootUrl || url.indexOf(':') === -1;

        // Ignore or Keep
        return isInternalLink;
    };

    // HTML Helper
    var documentHtml = function (html) {
        // Prepare
        var result = String(html)
            .replace(/<\!DOCTYPE[^>]*>/i, '')
            .replace(/<(html|head|body|title|meta|script)([\s\>])/gi, '<div class="document-$1"$2')
            .replace(/<\/(html|head|body|title|meta|script)\>/gi, '</div>');

        // Return
        return $.trim(result);
    };

    // Ajaxify Helper
    $.fn.ajaxify = function () {
        // Prepare
        var $this = $(this);

        // Ajaxify
        //$this.find('a:internal:not(.no-ajaxy)').click(function (event) {
        $this.find("a[data-isnav='0']").click(function (event) {
            // Prepare
            var
            $this = $(this),
                url = $this.attr('href'),
                title = ($this.attr('title') || null);

            // Continue as normal for cmd clicks etc
            if (event.which == 2 || event.metaKey) {
                return true;
            }

            // Ajaxify this link
            History.pushState(null, title, url);
            event.preventDefault();
            return false;
        });

        // Chain
        return $this;
    };

    // Ajaxify our Internal Links
    $body.ajaxify();

    // Hook into State Changes
    $window.bind('statechange', function () {
        // Prepare Variables
        var
        State = History.getState(),
            url = State.url,
            relativeUrl = url.replace(rootUrl, '');


        // Start Fade Out
        // Animating to opacity to 0 still keeps the element's height intact
        // Which prevents that annoying pop bang issue when loading in new content
        $content.animate({
            opacity: 0
        }, 800);

        // Ajax Request the Traditional Page
        callAjax("GetContent", {
            URL: url /*typeOfHeader: contentType, argsdata: argdata*/
        },
        false,

        function () {
            var ops = $('#ops');
            if (ops != null) ops.html('');
            ShowProgress('');
            //var now = (new Date()).getTime();                    //Caching
            //if (headerCache.exist(url)) {
            //    tDiff = now - headerCacheTime;
            //    if (tDiff < 3000) {
            //        setContentData(headerCache.get(url));
            //        return true;
            //    }
            //}
        },

        function (d) {
            //headerCache.set(url, d, null);
            //cacheName = url;
            HideProgress();
            setContentData(d);
        }, null);

        // end ajax

    }); // end onStateChange
}
(function (window, undefined) {

    // Prepare our Variables
    PrepareVariables();

    // Check to see if History.js is enabled for our Browser
    if (!History.enabled) {
        return false;
    }

    // Wait for Document
    $(function () {
        InitHistory();
    });
    // end onDomLoad

})(window); // end closure
function UpdateHistory() {
    var title = (document.title.trim().length > 0 ? document.title : null);
    var url = window.location.href.replace(/^.*\/\/[^\/]+/, '');
    var History = window.History;
    History.replaceState(null, title, url);
    $('a[data-isnav="0"').click(function () {
        // Prepare
        var
        $this = $(this),
            url = $this.attr('href'),
            title = ($this.attr('title') || null);

        // Continue as normal for cmd clicks etc
        if (event.which == 2 || event.metaKey) {
            return true;
        }

        // Ajaxify this link
        History.pushState(null, title, url);
        event.preventDefault();
        return false;
    });
}

function setContentData(d) {
    var data = d.data;

    // Fetch the scripts
    //$scripts = $dataContent.find('.document-script');
    //if ($scripts.length) {
    //    $scripts.detach();
    //}

    // Fetch the content
    contentHtml = data;
    if (!contentHtml) {
        document.location.href = url;
        return false;
    }

    // Update the menu
    //$menuChildren = $menu.find(menuChildrenSelector);
    //$menuChildren.filter(activeSelector).removeClass(activeClass);
    //$menuChildren = $menuChildren.has('a[href^="' + relativeUrl + '"],a[href^="/' + relativeUrl + '"],a[href^="' + url + '"]');
    //if ($menuChildren.length === 1) { $menuChildren.addClass(activeClass); }

    // Update the content
    $content.stop(true, true);
    $content.html(contentHtml).ajaxify().css('opacity', 100).show(); /* you could fade in here if you'd like */

    //Intialize other content
    initContent();

    // Update the title
    //document.title = $data.find('.document-title:first').text();
    //try {
    //    document.getElementsByTagName('title')[0].innerHTML = document.title.replace('<', '&lt;').replace('>', '&gt;').replace(' & ', ' &amp; ');
    //}
    //catch (Exception) { }

    // Add the scripts
    //$scripts.each(function () {
    //    var $script = $(this), scriptText = $script.text(), scriptNode = document.createElement('script');
    //    if ($script.attr('src')) {
    //        if (!$script[0].async) { scriptNode.async = false; }
    //        scriptNode.src = $script.attr('src');
    //    }
    //    scriptNode.appendChild(document.createTextNode(scriptText));
    //    contentNode.appendChild(scriptNode);
    //});

    // Complete the change
    if ($body.ScrollTo || false) {
        $body.ScrollTo(scrollOptions);
    } /* http://balupton.com/projects/jquery-scrollto */
    $window.trigger(completedEventName);

    // Inform Google Analytics of the change
    if (typeof window._gaq !== 'undefined') {
        window._gaq.push(['_trackPageview', relativeUrl]);
    }

    // Inform ReInvigorate of a state change
    if (typeof window.reinvigorate !== 'undefined' && typeof window.reinvigorate.ajax_track !== 'undefined') {
        reinvigorate.ajax_track(url);
        // ^ we use the full url here as that is what reinvigorate supports
    }
}

它工作正常，使用 Ajax 添加到页面上的内容使用 UpdateHistory() 函数添加到之前的状态。在某些页面上，状态已成功更新，但在某个页面上，第二次访问该页面时未更新内容。我搜索了所有类似的问题，但无法获得任何解决方案。一开始我以为问题出在 Internet Explorer 上，但后来我在 Firefox 上试了一下，但没有成功。请告诉我可能是什么原因？

更新

它适用于以下网址:

http://localhost:13956/AppStore/App/2012/Install

但不适用于:

http://localhost:13956/AppStore

最佳答案

第一页好像没有保存。尝试在 InitHistory() 中调用 UpdateHistory() 或 History.pushState(null, title, url)。

关于javascript - JQuery History.js 插件不替换 HTML4 和 HTML5 浏览器中一页的状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31593843/