與對象改變DOM時的後退或前進按鈕

Web安裝與對象改變DOM時的後退或前進按鈕

我有tab-pane處於激活狀態。
反彈到其他元素並觸發其他tabs的元素。
使用Bootstrap和jQuery。

GOALS

當用戶點擊我存儲元件ID和有源PANE到URL作爲哈希的導航鏈接。 http://www.mywebsite.com/#pane#id
我想這樣當用戶按下BACK或FORWARD按鈕，我可以拉下來的是BACK URL解析出位置，這個存儲到瀏覽器歷史記錄激活PANE和scrollTop的元素'ID」。
顯然，當BACK或FORWARD按鈕離開我們的域名時，我想在離開頁面之前提醒用戶。
我希望這可以在瀏覽器IE8和轉發。目前FireFox,CHROME和OPERA。
獎勵，如果這可以在移動Webviews中工作。

研究

我發現下面的鏈接和項目，但我不知道如果這些都是我的問題的最新或最佳的解決方案。

https://github.com/blixt/js-hash

Keeping history of hash/anchor changes in JavaScript

How to get the anchor from the URL using jQuery?

問題

這甚至可能因爲我讀你不能改變BROWSER HISTORY - 這是有道理的。
上述項目是否合適，還是有更好的解決方案可以滿足我的願望清單？
是否有可能創建一個全局jQuery點擊偵聽器，該偵聽器在任何其他偵聽器之前運行，這些偵聽器只是簡單地獲取元素ID並激活PANE然後將它們存儲到Array中。我只是簡單地攔截後退/前進按鈕事件來獲取該Array對象並從中設置DOM。

感謝您的幫助！

來源

2014-12-29 cph

您不允許覆蓋「BACK」和「FORWARD」按鈕的行爲。 – Barmar

你基本上必須經常觀察哈希值的變化，並相應地更新頁面。當它發生變化時，你甚至不會收到通知（沒有事件）。 – David

// Change HASH on clicking NAV buttons. 
$(function(){ 
    var hash = window.location.hash; 
    //hash && $('ul.nav a[href="' + hash + '"]').tab('show'); 

    $('.nav-tabs a').click(function (e) { 
    $(this).tab('show'); 
    $('html,body').animate({scrollTop: $('#top').offset().top}); 
    window.location.hash = this.hash; 
    _ignoreHashChange = true; 
    console.log(this.hash); 

    }); 
}); 

    // Updating the dom with hashchange. 
//_ignoreHashChange = true; //after clicking a butotn. 
_ignoreHashChange = false; 
$(window).on('hashchange', function (e) { 
    if(_ignoreHashChange === false){ 
     if (window.location.hash.split('#')[1].length) { 
      if (window.location.hash.split('#')[1][0] !== ".") { 
       $('.nav-tabs a[href="#'+ window.location.hash.split('#')[1] +'"]')[1].tab('show'); 
       $('html,body').animate({scrollTop: $('#top').offset().top}); 
      } 
      else { 
       $(window.location.hash.split('#')[1]).trigger("click"); 
      } 
      _ignoreHashChange = false; 
     } 
    } 
    _ignoreHashChange = false; 
});

來源

2014-12-31 19:31:23 cph

與對象改變DOM時的後退或前進按鈕

回答

相關問題