JQuery History.js插件在HTML4和HTML5浏览器中都不替换一个页面的状态



我使用JQuery History.js插件在HTML5浏览器中启用历史API,并在HTML4浏览器中进行模拟。我使用ajax脚本来实现这个插件。我稍微修改了一下这个脚本,如下所示:

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()函数添加到以前的状态。在一些页面上,状态更新成功,但在另一个页面上,当第二次访问该页时,它没有更新内容。我搜索了所有类似的问题,但无法得到任何解决方案。一开始我以为问题出在ie浏览器上,但后来我在Firefox上试了试,但没有用。请告诉我可能是什么原因?

http://localhost: 13956/应用商店/App/2012/安装

但不适合:

http://localhost: 13956/应用商店

看起来第一页没有保存。试着在InitHistory()里面调用UpdateHistory()History.pushState(null, title, url)