Internet Explorerでの遅延がlocation.hashの変更に気づいた

Question

これはよくあることかもしれませんが、問題に関しては何も見つけられないようです。少し背景があります：

私はいくつかのページにブートストラップのタブ付けシステムを使用しています。これらのページの$(document).ready()関数では、URLのハッシュに基づいてタブをアクティブにする基本的なコードと、位置のハッシュをlocation.replaceで変更するタブの表示機能に付随する短い関数があります。その結果、特定のタグにリンクすることができ、ページをリフレッシュすると現在のタブに移動できます。これはInternet Explorer以外のすべてでうまく動作します。

Internet Explorer（私はIE9でテストしています）では、IEがロケーションハッシュが変更されたことをIEが認識するまでに遅延（約10-15秒）があるようです。アドレスバーに手動でハッシュを入力してページを読み込むときにも、同様のことが起こります。認識するためには、数回のリフレッシュが必要です。それらに埋め込まれたハッシュでリンクをクリックすると、うまく読み込めるようです。

私はこれが何らかの不具合であると仮定しています。私は、永続的なタブの状態を処理するコードにクッキーを付けることができますが、他の誰かがこの問題をより洗練された方法で見つけましたか？

Answer 1

私はブートストラップのタブ付けシステムの遅延に慣れていないので、特定の用途やコンピュータの問題ではないことを確認してください。私はよく知っているブラウザのいずれかでjQueryのハッシュチェンジプラグインを使用して遅延を生成することはできませんでした。

ハッシュベースのナビゲーションを扱う他の方法については、jQuery hashchangeプラグインを使用してhashchangeイベントのコンテンツ/ページを変更するために次のように記述しました。主にハッシュを使ってバック/フォワード/リンクをきれいにサポートするためです。私は、私が使っているもののトリミングされたバージョンです。

この例では、アンカーリンクとonclickイベントで生成されたアンカーリンクを提供しています。ユーザーが現在アクティブなタブをクリックすると、ページがまだリロードされるため、onclickイベントを使用することをお勧めします。ページの読み込み時間は、ページが100ms以内に2回読み込まれないように追跡されます。

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 +ノックアウトとブートストラップを実行するWebページがあります。各ルート（ハッシュとのリンク）は約800〜900ミリ秒で移動しました。しかし、ページからすべてのCSS /スタイルを削除すると、各ルートのナビゲーションには〜30ミリ秒かかりました。