History.js getState（）at pageload

我對於History.js如何在頁面加載時工作有點困惑。我做了一些實驗，但結果似乎不確定。History.js getState（）at pageload

我的網站是一個搜索引擎，查詢存儲在URL參數：?Query=cats。該網站純粹是用JavaScript編寫的。當我做一個新的搜索時，History.js很好用，新的查詢被更新，並且狀態被推送。

我的問題是如何創建一個初始狀態，如果用戶手動輸入一個URL，包括Query參數。我試圖做到這一點的每一種方式都會導致在某些情況下運行搜索查詢兩次。這兩個似乎相沖突的用例包括：

用戶手動輸入網址（mydomain.com?Query=cats）到地址欄中並點擊輸入。
用戶導航到一個外部頁面，然後點擊返回按鈕

在這兩種情況下，所述的javascript負載，因此看起來到URL參數來生成的初始狀態。

但是，在第二種情況下，History.js將觸發statechange事件以及。

必要的代碼：

History.Adapter.bind(window,'statechange',function() { // Note: We are using statechange instead of popstate 
     var s = History.getState(); 
     if(s.data["Query"]){ 
      executeQuery(s.data); 
     } 
    });

和$（文件）。就緒我

// Get history from URL 
    s = getQueryObjectFromUrl(location.href); 
    if(s["Query"]){ 
     History.pushState(s,'',$.param(s)) 
    }

有沒有更好的辦法處理URL參數創建初始狀態？

來源

2013-07-29 CambridgeMike

你爲什麼不給用戶結果？ PHP時，他去/？Query = dasd直接？ –

客戶端應用程序的情況如何？ realpage.html/dynamicAppState被服務器接收爲不存在的目錄，迫使您重寫或htaccess，並且永不加載正確的頁面。你不需要編寫任何服務器代碼來實現這個功能......它是一個客戶端實用程序。當使用＃時，index.html被加載，並且＃之後的數據可以被輕鬆解析。現在你在做什麼？ –

由於我遇到類似的問題，因此我所做的是將綁定到statechange的函數定義爲命名函數，然後在加載頁面時將其全部運行。

它比嘗試解析URI或其他任何東西都更好，希望它有幫助。

來源

2013-11-26 18:10:46

你能舉個例子嗎？ –

這是我選擇了做它的方式（基於法比亞諾的反應）來存儲初始狀態參數

var renderHistory = function() { 
    var State = History.getState(), data = State.data; 
    if (data.rendered) { 
     //Your render page methods using data.renderData 
    } else { 
     History.replaceState({ rendered: true, renderData: yourInitData}, "Title You Want", null); 
    } 
}; 
History.Adapter.bind(window, 'statechange', renderHistory); 
History.Adapter.onDomLoad(renderHistory);

當然，如果您使用的是DOM負載像jQuery的不同你可以把renderHistory();裏面，但這種方式不需要任何額外的庫。它只會導致一次狀態更改，並且會用包含數據的狀態替換空的初始狀態。通過這種方式，如果您使用ajax在else中獲取initData，並且在下次人員返回頁面時不需要獲取它，並且您始終可以將呈現設置爲false以返回到初始頁面狀態/刷新內容。

來源

2014-07-19 06:59:42 vipero07

History.js getState（）at pageload

回答

相關問題