HTML5/jQuery：pushState和popState - 深層鏈接？

首先，我似乎無法確定pushState函數中的第一個參數是什麼？我通過了什麼？我只是想在瀏覽我的頁面時更改網址。我查詢視口中當前元素的ID，其ID也應該是URL中的鏈接。這與以下代碼正常工作。HTML5/jQuery：pushState和popState - 深層鏈接？

var currentHash, 
     url; 

    if (history && history.pushState) { 

     $(window).scroll(function() { 
      hash = $('.layer:in-viewport').attr('id'); 
      catHash = $("#"+hash).parent('section').attr('id'); 

      var data = "nothing"; 

      if (catHash != undefined) 
       url = "/" + catHash + "/" + hash; 
      else 
       url = "/" + hash; 

      if (currentHash != hash) { 

       window.history.pushState(data, hash, url); 

      } 

      currentHash = hash; 

     }); 

    }

現在我有兩個問題：

1）現在在地址欄的網址成功地改變了，當我通過我的頁面滾動。我最初加載頁面時如何查詢地址欄中的url/hash。所以想象我現在有一個鏈接，如www.url.com/deep我想找出什麼/深是什麼？我是否只需要查詢整個top.location並將其分割爲每個「/」？我的意思是這些鏈接實際上不存在，那麼當我調用一個使用pushState函數操作的url時，如何避免404頁面？

2.）單擊後退按鈕時，如何才能找出地址欄中的最後更改？所以我想在點擊瀏覽器後退按鈕時找到/deep，這樣我就可以導航到頁面上的那個位置。我想這可能與popstate一起工作，但我找不到如何！

謝謝你的幫助！

更新：

window.history.pushState("test", hash, url);

...

$(window).bind('popstate', function(event){ 
     console.log(event.data); 
    });

這常是空。不應該返回「測試」嗎？

來源

2012-01-08 matt

'event.state'不'event.data' – Quentin 2012-01-08 10:12:04

是的，我試過了，但是沒有'event.state'當我'控制檯.log（event）;'只有數據，但是數據總是「空」，如果我嘗試記錄'event.state'，它總是空的！ – matt 2012-01-08 10:17:14

好吧，找到解決方案......好像'$（window）.bind（'popstate'，function（event）{'不工作，但是'window.onpopstate = function（event）{'does！ – matt 2012-01-08 11:16:04

pushState函數的第一個參數是什麼？

從the documentation

狀態對象 - 狀態對象是一個與（）由pushState的創建新的歷史條目相關的JavaScript對象。只要用戶導航到新狀態，就會觸發popstate事件，並且事件的state屬性包含歷史記錄條目狀態對象的副本。

因此，當您返回到該狀態時，您返回的是您選擇的一組數據。

現在，當我滾動頁面時，地址欄中的網址會成功更改。我最初加載頁面時如何查詢地址欄中的url/hash。

看看location對象...但你不需要。您可以（也應該）填充頁面服務器端。這是pushState的優勢之一，如果JavaScript不可用並且服務器端回退順利集成，則鏈接仍然有效。

如何在單擊後退按鈕時找出地址欄中的最後更改？

您添加事件偵聽器（查找popState事件），並且存儲在其中的數據將在事件對象上可用。 MDN has an example

來源

2012-01-08 09:53:36 Quentin

謝謝，我幾乎得到它。我更新了popstate的東西，所以我可以存儲一個字符串作爲第一個數據屬性在PushState中，並在按下後退按鈕時返回它，對嗎？我只需要知道當按下瀏覽器後退按鈕時，如何查詢我使用pushState所做的最後更改。還有一件事：我得到了服務器端的東西，然而，我怎樣才能（在我的情況下）與單個頁面佈局返回到此頁面，並查詢地址欄？我有一個單一的頁面佈局，我只是想在頁面上的某個位置上更改網址... – matt 2012-01-08 10:12:22

當我發送那些基因處理（非生物）深層連接之一有人在瀏覽器中打開它們，我想跳到頁面上的位置。正如你在上面看到的，'/ url'簡單地匹配了視口中元素的ID ......'hash = $（'。layer：in-viewport'）。attr（'id'）;'所以當'div＃example '在視口中，我的網址看起來像'abc.com/example'。當我重新加載頁面時，我想查詢這個'/ example'並添加一個'＃'並跳轉到頁面上的這個位置。我該怎麼做？ – matt 2012-01-08 10:14:50

您如何使用您在那裏存儲的數據？ – 2012-09-21 16:10:33

jQuery的抽象了事件對象，你想：event.originalEvent.state;

來源

2012-12-17 21:31:39

HTML5/jQuery：pushState和popState - 深層鏈接？

回答

相關問題