Internet Explorer發現瀏覽器的位置發生了延遲

Question

這可能是常識，但我似乎無法找到任何有關此問題的信息。這裏有一個小背景：

我有一些頁面使用Bootstrap的標籤系統。在這些頁面的$(document).ready()函數中，有一些基本代碼可以根據URL中的哈希來激活選項卡，而一個簡短的函數會附加到標籤顯示的函數中，用於更改位置的哈希值location.replace。其結果是，您可以鏈接到特定的標籤，同時刷新頁面可讓您保持當前標籤。這適用於所有情況，但Internet Explorer。

在IE瀏覽器（我一直在測試IE9），似乎有一個延遲（約10-15秒）之前，IE認識到位置哈希已更改。當手動輸入哈希到地址欄並加載頁面時會發生類似的事情 - 需要幾次刷新才能識別。單擊嵌入在其中的哈希鏈接似乎加載正常。

我假設這是一種小故障。我想我可以將一個cookie附加到處理持久標籤狀態的代碼中，但是有其他人找到了更好的方法來處理這個問題嗎？

Answer 1

我不熟悉或意識到Bootstrap的TabBack系統有任何延遲，您可能想要驗證問題不是由於您的特定用途或計算機造成的。我無法在任何我熟悉的瀏覽器上使用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 +淘汰賽和引導程序的網頁。每個路由（哈希鏈接）花費大約800-900毫秒導航到。但是，當我從頁面中刪除所有CSS /樣式每個路由導航花費約30毫秒。