Google如何在頁面轉換時捕獲按鍵？

如果您訪問Google.com並在搜索欄中輸入一個字母，它會立即將您傳輸到另一個頁面。您可以在此期間儘可能快地輸入，並且Google不會丟失單個字符。Google如何在頁面轉換時捕獲按鍵？

我試着用keyup（）事件和setinterval（）來模擬這個，但是當它加載頁面時，我仍然失去了一個或兩個字符。

$(document).ready(function(){ 
var timer;$("input#q").keyup(
    function(e){ 
    var str = $("input#q").val(); 
    if(str.length > 1){ 
    clearInterval(timer);timer = setTimeout(
     function(){var url = "/search/?q="+encodeURI($("input#q").val()); 
     location.href = url;}, 210); 
    } 
});

這是我目前使用的代碼，它的工作原理，但是當它轉移你到下一個頁面可以失去一個按鍵/ KEYUP。

有誰知道Google如何做或有任何建議嗎？

感謝

來源

2012-09-17 noko

你可能想閱讀AJAX。 http://en.wikipedia.org/wiki/Ajax_(programming） – skunkfrukt

你以爲你是運到另一個網頁，但實際上不是。它在歷史堆棧中使用pop/push，使用新的（酷！）HTML5 feature。

該頁面從不重新載入，因此您不會丟失任何字符。

Github在瀏覽存儲庫時也會使用它。

來源

2012-09-17 11:58:09

感謝您的快速回答！你認爲你可以沙沙作響一些示例代碼嗎？ – noko

我不認爲我可以在JSFiddle中使用此功能。你最好的選擇是在[這個問題]中找到一個鏈接（http://stackoverflow.com/q/4015613/263057）。我發現[這個例子]（http://html5demos.com/history）特別有用。代碼很簡單，應該適合您的需求。 –

@GuillaumePoussel我同意當按下_Enter_鍵時會推送歷史記錄，但我不認爲'keyUp（）'事件正在推送歷史記錄。 – andyb

從我能看到使用google.com時，他們並沒有真正改變酒吧的位置，直到你離開搜索框。此時它會快速更改頁內定位符（在＃之後），這將不會觸發頁面的完全重新加載。

來源

2012-09-17 11:58:58

捕獲的輸入實際上是在同一個<input>控件中完成的，該控件剛剛通過更改CSS定位來移動。沒有頁面轉換，只有JavaScript才能對按鍵作出反應，然後相應地操作樣式。

在後臺執行增量搜索時會觸發AJAX事件（如果您爲Google啓用了該選項），如果您使用可顯示網絡流量的瀏覽器（例如Chrome），則可以看到該事件。

來源

2012-09-17 12:12:36 andyb

我設法通過動態重新排列DOM來模擬Google的行爲。我在頁面上移動輸入框之前生成了新的DIV和remove（）'d舊的。我想我可以用pop/push功能做這樣的事情。儘管如此，仍然不能100％確定如何使用它。 – noko

Google如何在頁面轉換時捕獲按鍵？

回答

相關問題