Question

这可能是常识，但我似乎无法找到有关此问题的任何内容。这是一个小背景：

我有一些页面使用Bootstrap的标签系统。在这些页面的$(document).ready()函数中有一些基于URL中的哈希激活选项卡的基本代码，以及一个附加到选项卡显示的函数的简短函数，该函数使用location.replace更改位置的哈希值。结果是您可以链接到特定标记，并刷新页面使您保持在当前选项卡上。除了Internet Explorer之外，这种方法都可以正常工作。

在Internet Explorer中（我一直在使用IE9进行测试），在IE识别出位置哈希发生变化之前，似乎有一段延迟（大约10-15秒）。当手动将哈希键入地址栏并加载页面时，会发生类似的事情 - 需要进行几次刷新才能识别。单击包含在其中的哈希的链接似乎加载正常。

我认为这是一种小故障。我想我可以在处理持久标签状态的代码上附加一个cookie，但是还有其他人找到了处理这个问题的更优雅的方法吗？

Answer 1

我不熟悉或意识到Bootstrap的标签系统有任何延迟，您可能需要验证问题不是由于您的特定用途或计算机。我无法在我熟悉的任何浏览器上使用jQuery hashchange插件产生任何延迟。

至于处理基于散列的导航的其他方法，我写了以下内容，使用jQuery hashchange插件更改hashchange事件的内容/页面;主要是干净地支持后退/前进/带有哈希的链接。我跟随的是我正在使用的修剪版本。

该示例提供了一个锚链接以及使用onclick事件生成的链接。首选使用onclick事件是因为如果用户单击当前活动的选项卡，则仍会重新加载该页面。跟踪页面加载时间以确保页面在100毫秒内未加载两次。

jQuery哈希插件：http://benalman.com/projects/jquery-hashchange-plugin/

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://benalman.com/code/projects/jquery-hashchange/jquery.ba-hashchange.js"></script>
<script>
var hashUris = [];
var tabSet;
var actPage = '';
// bare tab array (use to populate tab html and hash array)
tabSet = [{hash: 'page1', pageId:1, id: 1}, {hash: 'page10', pageId:10, id:2 }, {hash: 'page20' , pageId: 20, id: 3}];

// handles the hash events
$(function() {
    // loop all tab array, add items to hash array, determine primary page and active page
    $.each(tabSet, function(i, tab) {
        // using tabIndex to prevent looping hash array later
        tab.tabIndex = i;
        // first tab is primary by default
        if (typeof priTabId == 'undefined') priTabId = tab.id;
        // add tabs/page info to hash array
        hashUris.push({hash: tab.hash, pageId: tab.pageId, tabIndex: i, tabId: tab.id, priActive: priTabId == tab.id});
        // initial page to be loaded
        if (priTabId == tab.id) priTabIndex = i;
        // current hash
        if (location.hash && '#'+tab.hash == location.hash) activeTabIndex = i;
    });
    if (!location.hash && !actPage && typeof priTabIndex != 'undefined') {
        // page load, load primary tab
        loadTabPage(priTabIndex);
    } else if (location.hash && !actPage && typeof activeTabIndex != 'undefined') {
        // page refresh
        loadTabPage(activeTabIndex);
    }
    $(window).hashchange( function(){
        if (location.hash) {
            $.each(hashUris, function(index, hashUri) {
                if ('#'+hashUri.hash == location.hash && actPage != hashUri.pageId + '#' + hashUri.hash) {
                    // found matching tab/page
                    loadTabPage(hashUri.tabIndex);
                }
            });
        } else if (actPage) {
            // navigated to empty space, attempt to find a primary active page
            $.each(hashUris, function(index, hashUri) {
                if (hashUri.priActive) loadTabPage(hashUri.tabIndex);
            });
        }
    });
});
function loadTabPage(tabIndex) {
    if (typeof tabSet[tabIndex] == 'undefined') return;

    // track when the page was loaded
    lastLoad = tabSet[tabIndex].lastLoad;
    tabSet[tabIndex].lastLoad = new Date().getTime();
    // load only once in 1ms-100ms
    if (tabSet[tabIndex].lastLoad - lastLoad < 100) return;

    // load page content/do actions here
    alert(tabSet[tabIndex].pageId);
    //$("#content").load('?pageId='+tabSet[tabIndex].pageId);

    // active page checked against hash during hashchange
    actPage = tabSet[tabIndex].pageId + '#' + tabSet[tabIndex].hash;
};
// user code to create tabs 
$(function() {
    // use tabs array to display some tabs
    // this depends on the above code to set .tabIndex on the tabSet array
    tabsObj = $('<div/>');
    $.each(tabSet, function(i, tab) {
        if (!tab.hash) return true;
        tmpObj = $('<span>'+tab.hash+'</span>');
        tmpObj.data('tabIndex', tab.tabIndex);

        // use an onclick event to change the page
        tmpObj.bind('click', function(e) {
            if (typeof $(this).data('tabIndex') == 'undefined' || typeof tabSet[$(this).data('tabIndex')] == 'undefined') return;

            // load page directly if active hash, otherwise change to clicked hash
            if ('#'+tabSet[$(this).data('tabIndex')].hash == location.hash) {
                loadTabPage($(this).data('tabIndex'));
            } else {
                location.hash = tabSet[$(this).data('tabIndex')].hash;
            }
            e.stopPropagation();
            return false;
        });
        tmpObj.appendTo(tabsObj);
        delete tmpObj;
    });
    tabsObj.appendTo($("#tabs"));
    delete tabsObj;
});
</script>
<div id="tabs"><a href="#page1" >Link to Hash</a></div>
<div id="content"></div>

Answer 2

对于一些运行IE8的客户来说，只是遇到了这个问题。我们有一个运行sammy.js + knockout和bootstrap的网页。每个路由（带有哈希的链接）大约需要800-900毫秒才能导航到。然而，当我从页面中删除所有css /样式时，每个路由导航花了大约30毫秒。

Internet Explorer注意到对location.hash的更改延迟

2 个答案: