如今的網站是否可以設計成只有一個html（內容框架），全站無跳轉？

01-05

如題，html代表只有一個網頁文件。（可以是php，jsp，aspx等等）
全站無頁面跳轉，點擊鏈接後通過其他技術來抓取新內容生成頁面。可能最終效果更像一個web應用而不是網站？
網站類型不限，數據量適度。不知這樣設計是否可行，如果不可行，有哪些問題沒法解決？如果可行，各位有類似的網站推薦嗎？或者能模擬出類似效果的網站？
（背景是題主大四準備做畢業設計的一個想法，覺得傳統頁面跳轉白屏刷新對於用戶的視覺引導不是太友好。想通過div切換動畫來給用戶直觀的視覺定位。現在看到的大多都是通過錨點或者多div交替顯示來引導的，內容多一點的話載入速度很愁人啊！）

就是所謂單頁面應用，有日趨流行之勢。

原理是 AJAX ，實際採用框架可以是 AngularJS ，後台搭個 RESTful Service 或者其他什麼伺服器都以。

細節可以看書，AngularJS 有一本動物書，入門還可以，中譯也不算太扯淡。

Single-page application 單頁面應用的wiki鏈接；

Awwwards Nominees 一些單頁應用的設計，說不定對你有啟發。

先放大DEMO，我的個人博客

http://bh-lay.com

這類網站目前廣泛應用在諸如網盤、音樂、郵箱等交互較為細膩的站點，具體實現就不多說了，可以見我的另一個回答。

請問單頁應用的定義是？最好舉個例子。 - im劇中人的回答

—————————————————————————

上面是在公交車裡手機倒騰出來的文字

下面是另一個提問里的回答（有刪減）

—————————————————————————

提到單頁面，不得不提到ajax與seo這兩者的關係。

前端原本是一個純page的工作，但隨著產品對用戶體驗的要求越發苛刻，ajax的使用也就越發的頻繁，從起初的信息驗證到後來的前端mvc，ajax雖然只是前後端通訊的工具，但在其中起到越來越重要的作用。

然而相較與後端mvc，ajax渲染的方式存在一個很嚴重的問題。就是面對SEO幾乎不舉，而且刷新或發送url無法保留瀏覽進度。

這時其實已經暴露出一個問題，就是如何界定前後端MVC的界限，以及如何處理前後端視圖的統一。

單頁面就是為了解決這類問題而生的。前端自豪的拿到了監管url的權利，通過監聽頁面地址變化來調用前端MVC模塊，渲染不同頁面。當然，前端這時也擁有了修改URL的能力。管理好前端視圖與URL，整個單頁面就已經架構完成。(關鍵點:hmtl5使用historyAPI的支持，低級瀏覽器採用hash段的管理或無視)。

然而這隻解決了瀏覽進度與URL的維持，並沒有解決SEO的問題。

解決SEO的問題，則需要前後端圍繞URL各自負責視圖的渲染，當然這一步需要有一個相互坑的過程。

以上僅僅個人的一些經驗，下面是一些與單頁面相關的關鍵字，請自行google！

模塊定義

模塊載入

模板引擎

pushStaus

hash

可以，比如 https://worktile.com

搜索關鍵詞：

單頁應用程序

Anglular JS

厚顏無恥地曬出自己的blog

首頁 - 小皓的blog

ajax讀取內容+history實現無刷新改變地址欄。

恩，我09年的時候就全站使用ajax了，完全沒有跳轉，不過當時還不知道有HTML5這玩意，是通過修改hash值來標記頁面地址改變，這點可以參考QQ空間、網易音樂、騰訊新聞站的圖片新聞等，都是類似的實現手段。

不過大多數網站基本都不適用這種坑爹的全站無刷新機制，why？SEO不友好唄，搜索引擎可看不懂JS（或者說沒空去看，據說谷歌可以通過運行JS來獲取原本由JS生成的內容了），如果全站用ajax無刷新，那麼搜索引擎將無法通過頁面跳轉來獲取其他頁面的內容。

對於這個問題，我的解決方案是，每個頁面實際上還是存在的，如果你直接輸入某個頁面的URL，還是可以訪問到這個頁面，而通過點擊頁內鏈接，JS將會阻斷click事件（搜索引擎不運行JS，那麼不存在阻斷了，直接訪問頁面），然後ajax請求這個頁面，而對應頁面也會判斷到來自ajax的請求，不返回完整的頁面，僅返回所需要的部分。不過如果大型網站也用我這做法來實現，豈不是閑的蛋疼？

而且我們也應該盡量避免對ajax的濫用，不該用ajax的地方應該堅決讓頁面跳轉。鑒於現在IE8以下版本的古董瀏覽器還在使用，這類用戶是無法實現history無刷新修改地址欄的，那麼當你逛知乎的時候就會發生這麼一件事：

恩，看到一條精彩的問題，點擊，好華麗的切換動畫。喲，問題好精彩，馬上分享給好友。複製地址欄：http://www.zhihu.com，發送到QQ群：好贊的文章呀，棒棒噠。好友1：你發個知乎首頁給我幹嘛？好友2：啥東西呀，那裡棒了。於是你看著精彩的問題，卻不知如何與人分享。

如果用戶使用的是現代瀏覽器，支持history.pushState這樣的寫法了，但是你就面臨你需要為每個頁面單獨處理ajax請求，就像我的博客一樣，需要判斷訪問的來源，屬於直接請求則返回完整頁面，屬於ajax請求則返回內容信息供JS處理。而且每一個頁面都有單獨的樣式，單獨的JS，如果在第一次打開就全部載入肯定不合理，若是在頁面載入後再非同步載入樣式和腳本文件，那麼前端的工作複雜度就會幾何增長。我的blog頁面簡單，不複雜，這麼做起來很好玩，但是知乎要這麼干……我不知道知乎的程序員們會不會拿刀砍產品經理……

更多的做法是，在一些交互量較大的應用，比如網易音樂的播放器，論壇的登陸框等，局部應用ajax實現友好的交互效果，但是內容的讀取，還是用頁面切換來的實在。啥？內容太多載入太慢？恩，緩存、壓縮、合併圖片，通過這些手段來優化，如果你一個navbar能夠阻斷用戶好幾秒的話……好好檢查網路是不是出問題了……

即刻登錄Worktile（https://worktile.com），登錄之後看到的所有頁面和跳轉，其實都只有一頁。我們是真正的One Page Application，基於Angularjs和JQuery。

單頁面應用, 現在已經比較多了, 不什麼技術難題.

典型的框架比如 Backbone, Emberjs, 最近流行 Angular, 我推薦的還有 React/Flux.

具體的知識點可以一邊看 Backbone 一邊學.

這個叫singlepage application,原理是監聽hashchange或者history來實現無刷新，

具體可以看看backbone

Single Page Application。。。

最近正在做這個。

只要AJAX玩得足夠6，不考慮具體得使用情景的話利用html5的history API 可以很輕鬆得做出來。。。

AngularJS可以幫助你做很多事情～backbone也很好

所謂內容多載入慢可以把你的資源改為動態載入（包括腳本的動態載入）。不可視區域的內容延遲載入，靜態內容本地緩存，引入載入動畫（進度條），種種優化足夠拖延下去了。

但是你沒辦法把taobao這種用戶頻繁切換多個頁面/頻繁大面積刷新的網站變成單頁的web app（除非你在這個app裡面維持幾個自己寫的tab頁，包含著海量的DOM內容）。我寫過好幾個單頁app，基本都是類似於管理界面界面這樣，也有google keep這樣的功能稍複雜的瀑布流的單頁APP。內容多就得設計更加複雜的載入方法/介面，同時還得控制你的資源質量（某種程度上由於高質量圖片載入造成得難以消除的阻塞，技術上也是很難消除的）。

再說有iframe這種東西。。。不用AJAX也不會造成太大的阻塞。

工程的思想看，合適的才是最好的～

百度和谷歌不理你

如果你不稀罕百度收錄你，你當然可以做一個單頁網站。但這年頭不稀罕百度的站長，似乎還不存在。沒有百度哪來的用戶。

參考網易雲音樂。

他們用iframe作為網頁的容器，網頁內容放在了iframe里，點擊鏈接的時候實際改變的是iframe里的內容。

效果就是網頁內容不斷變換，下面的播放器還是正常的播放。

個人感覺體驗很棒。

個人覺得沒必要這麼做。

因為網頁做不到原生應用程序的絲滑感覺，既然做不到，

就一定要突出網頁的觀感，讓用戶知道，這不是應用程序，

這就是個網頁。

如果做得象個應用，用戶下意識里就會用「原生程序的絲滑」來做對比，

反而覺得用戶體驗不好。

題主一定要一個網頁文件，全站無跳轉的話，

可以將內容全部放到文件里，通過css display隱藏或顯示特定的元素，

缺點數據量過大。

如果要動態載入數據，可用ajax結合innerHTML達到，缺點速度不會很快。

建議用iframe達成目標。要盡量減少白屏，可用js控制，先藏起iframe，內容載入完成後，再顯示出iframe. 實際上，我測試下來，在安卓手機端用iframe，效果最好。這可能跟之前用PC瀏覽器的經驗不太一樣。用iframe效果好，可能有以下兩點原因 --

1. 用iframe方案，可盡量減少的js的使用。大部分做成靜態的網頁，於是對瀏覽器很友好。也便於瀏覽器將資源放入cache，於是可以快速載入。

2. iframe不易引起內存暴增問題。相應的ajax，插入div等，控制的不好，網頁的dom元素容易將內存塞滿，變得奇慢無比。

可以，類似於top+main+bottom，main的內容來自於AJAX

SEO咋辦

Angular是比較好的實現方法。不過學習成本有些高。至於很多人說的對百度和谷歌的搜索搜索收錄不利其實使用ng的路由功能就可以解決ajax應用對seo的優化。

妙味的官網

可以使用angularJS吧，是純粹的HTML頁面，然後一些模板文件都可以打包在一個JS文件裡面…

Jermolene/TiddlyWiki5 · GitHub

搜索一下backbone.JS首頁最下一部分有很多example網站，很多都是單頁ide級別的，或者體驗一下印象筆記web版。