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

Question

这可能是常识，但我似乎无法找到有关该问题的任何信息。这是一些背景知识:

我有一些页面使用了 Bootstrap 的标签系统。在这些页面的 $(document).ready() 函数中是一些基于 URL 中的散列激活选项卡的基本代码，以及附加到选项卡显示功能的短函数使用 location.replace 更改位置的散列。结果是你可以链接到一个特定的标签，刷新页面也会让你保持在当前选项卡上。这适用于除 Internet Explorer 之外的所有内容。

在 Internet Explorer 中(我一直在使用 IE9 进行测试)，在 IE 识别位置哈希已更改之前似乎有延迟(大约 10-15 秒)。在地址栏中手动输入哈希并加载页面时会发生类似的事情——需要几次刷新才能识别。单击其中嵌入哈希的链接似乎可以正常加载。

我假设这是某种故障。我想我可以将 cookie 附加到处理持续选项卡状态的代码，但有没有其他人找到处理此问题的更优雅的方法？

Answer 1

我不熟悉或不知道 Bootstrap 的标签系统有任何延迟，您可能想确认问题不是由您的特定使用或计算机引起的。我无法在我熟悉的任何浏览器上使用 jQuery hashchange 插件产生任何延迟。

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

该示例提供了一个 anchor 链接并使用 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>