如何在沒有實際頁面刷新的情況下更新頁面html和url

我想知道是否有人能指點我學習如何更新頁面html和url而不刷新頁面。如何在沒有實際頁面刷新的情況下更新頁面html和url

是否有任何現有的JavaScript庫來處理這個問題，或者那裏有一本涵蓋這類事情的好書。

以下是使用該效果的示例網站。

注意實際的HTML是更新時部分被改變，以及鏈接，同時保持與不可見的頁面刷新的平穩過渡。該網站也能正常工作沒有JavaScript。

此外，如果任何人看到使用這種方法的任何缺點，我都耳熟能詳。

2012-03-29 puddletown

可能重複[修改URL而不重新加載頁面]（http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page）。另請參見本頁右側「相關」列表中的許多重複項。 – JJJ 2012-03-29 09:11:18

嗯，我特別關心頁面上的html是如何更新的。似乎更多，然後只是修改網址欄。 – puddletown 2012-03-29 09:21:44

這只是基本的JavaScript。 – JJJ 2012-03-29 09:22:53

有，它被稱爲PushState。

這是一種新技術，大多數最新的瀏覽器（互聯網瀏覽器排除：P）的支持。基本上它通過javascript改變了地址欄。

我可能看起來沒什麼，但它真的很整潔！通常你會通過散列www.example.com#/contact來做到這一點。

我使用過這個技術的最新項目我用了一個名爲History.js的js插件，它可以確定您的瀏覽器是否支持PushState。

根據不同，我要麼將一個事件綁定到執行pushstate和一些ajax而不是加載新站點的相關鏈接，或者讓<a href="">正常工作。
這讓所有的瀏覽器都很開心。

基本上，我的腳本通過刷新和pushstate和ajax一樣創建了相同的結果。

編輯：
剛上你的那個例子旁註。這是非常巧妙的:)
它通過ajax加載新頁面，並獲取它的HTML，但如果你再次瀏覽該頁面，它會重新顯示提取的結果，所以沒有不必要的Ajax調用。

來源

2012-03-29 09:17:13

謝謝！我認爲就是這樣！在我回答之前，我會再研究一下。 – puddletown 2012-03-29 09:26:17

在您的編輯：是的！我對這個網站印象非常深刻。從一開始看，它似乎完全逐步增強，並且js相當不錯。非常聰明的東西。 – puddletown 2012-03-29 10:06:40

如果您需要重新加載頁面的一部分，而無需重新加載整個頁面，我會強烈建議使用jQuery.Load()：

http://api.jquery.com/load/

隨着jQuery.load（），您可以選擇一個div並從另一個網頁重新加載內容。例如：

$(".myDiv").load("/myOtherwebpage.html");

你也可以指定其他頁面上的特定元素的含量：

$(".myDiv").load("/myOtherwebpage.html .myOtherClass");

但是，如果你需要重新從另一頁的所有內容，並更改網址一個不同的頁面，那麼我只是建議鏈接到該頁面。 Theres沒有通過jQuery做這件事情的好處。

來源

2012-03-29 09:12:15 Curt

雖然這是我第一次，但實際的HTML沒有更新，它只是換出一個腳本。如果您查看源代碼並導航網站，您可以觀看html更改。 – puddletown 2012-03-29 09:22:57

@ user1300321：源代碼是源代碼，你不會通過使用javascript來改變它。你似乎想要一個頁面導航的一切，但沒有使用它......爲什麼？ – musefan 2012-03-29 09:27:20

如何在沒有實際頁面刷新的情況下更新頁面html和url

回答

相關問題