作者Luos (Soul)
看板Ajax
標題[問題] dropbox網頁的ajax怎麼辦到的...?
時間Thu May 17 14:39:36 2012
自從dropbox改版成可以drap&drop之後 一直有個疑問
當我登入之後 網址列會變成 www.dropbox.com/home
點開Photos資料夾 網址列變成 www.dropbox.com/home/Photos
按瀏覽器的上一頁還會回到home
看起來並不是整個頁面刷新 而只是用ajax 刷新中間的 ol
這怎麼辦到的...?
我唯一想的到的方法是在server端寫一個module來擷取網址
可是這樣整個頁面都會重整說
請教一下 這種功能到底怎麼作?
謝謝
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 116.228.152.106
1F：推 knuckles:HTML5 History API 05/17 14:49
2F：→ Luos:這樣IE7 8 怎麼打的開=3= 05/17 14:56
3F：→ xiphoid:不支援就普通的讀取新網頁 05/17 14:58
4F：→ Luos:我手邊居然沒有IE7能試... 05/17 15:04
5F：→ xiphoid:呃 剛剛測試 ie8用hash當fallback 05/17 15:05
6F：→ Luos:我在網址列直接輸入www.dropbox.com/home/Photos也行 05/17 15:09
7F：→ Luos:這不是History API 作的吧 05/17 15:10
8F：→ xiphoid:html5 history api只是能不靠hash hack改網址不重讀網頁 05/17 15:17
9F：→ xiphoid:跟有上/下一頁紀錄 網頁內容怎麼產生不是它的業務 05/17 15:17
10F：→ Luos:html5demos.com/history 也能做到上下頁說 05/17 15:23
11F：推 mesak:HTML5 history.pushState 05/17 20:57
12F：推 Canboo:TML5 History無誤，請研究完再來質疑 05/17 22:02
13F：→ Luos:研究中 希望能生出來 05/17 22:45
14F：推 tomap41017:可以考慮pjax 05/17 23:22
16F：→ Luos:Pjax看來不錯 來玩玩看 05/18 12:10
17F：→ Luos:Popstate 之後怎麼history.state是null.... 05/18 12:11
20F：→ Luos:pjax 沒有fallback... 改完History.js 好了 05/18 14:53
21F：→ Luos:眼花了 pjax 有fallback 05/18 17:20
22F：→ Luos:我輸了 能不能推薦pjax的教學或sample... 05/21 12:00
23F：→ Luos:xiphoid大的網站到底怎麼運作的? 完全看不出來Orz 05/21 12:03
24F：→ Luos:找到的範例都只有一行 $('a').pjax('#main');為什麼能夠運行? 05/21 12:06
25F：→ xiphoid:那個網站就一般靜態網頁而已 上面選單是Chosen快速搜尋用 05/21 12:48
26F：→ xiphoid:沒用pjax的情況就很平常的一堆html連來連去 05/21 12:48
27F：→ xiphoid:用pjax後變成由ajax讀html改內容+history api改網址 05/21 12:49
28F：→ xiphoid:$('a').pjax('#main')是把網頁的'a'綁click事件 05/21 12:49
29F：→ xiphoid:做上上個推文的行為 #main是放新網頁內容的dom 05/21 12:49
30F：→ xiphoid:自己網站內部連結以/開頭 所以用$('#main a[href^="/"]') 05/21 12:50
31F：→ xiphoid:不過剛發現pjax似乎會自己判斷 cross origin就跳過 05/21 12:50
32F：→ Luos:謝謝xiphoid大詳細的解說 我想問的是 第一個網頁裡哪裡有pjax 05/21 13:09
33F：→ Luos:是在requireJS裡? 我查的requireJS跟pjax 沒關係說=3= 05/21 13:11
34F：→ Luos:$('a').pjax('#main') 讓我無法理解的部分是 a沒有preventDef 05/21 13:12
35F：→ Luos:ault 不是會開啟網頁嗎 至少我自己做的會=3= 05/21 13:13
36F：→ Luos:再來就是 哪裡定義URL? pjax會直接讀取a的href? 05/21 13:14
37F：→ Luos:git上面寫得option裡面有url的定義 url寫在option裡面雖然成 05/21 13:16
38F：→ Luos:功 但是所有的a都連到同一個網頁也沒意義就是了=w= 05/21 13:17
39F：→ Luos:謝謝xiphoid大願意回文教我 <(_ _)> 05/21 13:19
40F：→ xiphoid:不客氣._. requirejs跟這個無關 只是用來把js縮成一個檔案 05/21 13:35
43F：→ xiphoid:preventDefault: 83行 05/21 13:36
44F：→ Luos:我剛好也在看pjax的jquery 為什麼google這麼久都沒想到要去 05/21 13:38
45F：→ Luos:檔案咧=3= data-pjax這個attr一定要嗎? 05/21 13:40
46F：→ xiphoid:有 source code 有真相 05/21 13:40
47F：→ xiphoid:不用data-pjax就要用.pjax('#container')定義內容填哪 05/21 13:42
48F：→ Luos:這就是說pjax是到href去把html撈出來 這跟我\要做的有點微妙 05/21 13:58
49F：→ Luos:的不同 我是要從php把html撈出來 再把href裡的url push到網址 05/21 14:00
50F：→ xiphoid:可以直接$.pjax({url: '/authors', container: '#main'}) 05/21 14:04
51F：→ xiphoid:不用透過<a> 05/21 14:04
52F：→ Luos:列 還有個疑問 沒設定fragment不就會把整個html load回來嗎? 05/21 14:04
53F：→ Luos:對吼... 只不過這樣就不能用href來存假網址了 05/21 14:08
54F：→ xiphoid:"pjax on the server side" 能從header盼斷是不是pjax 05/21 14:15
55F：→ Luos:那就是要在server判斷 如果是pjax就只傳部分的html? 05/21 14:20
56F：→ Luos:這樣要跟三方的網頁兼容就很困難了 05/21 14:20
57F：→ Luos:$.pjax 的話沒有href 怎麼pushState...? 05/21 14:21
58F：→ xiphoid:直接傳新網址給$.pjax *url: '/authors'* 05/21 14:23
59F：→ Luos:/authors 會被push到網址列? 05/21 14:35
60F：→ xiphoid:對 05/21 14:48
61F：推 tomap41017:pjax小弟已經愛上了XDDD 05/21 14:51
62F：→ Luos:有沒有辦法push我指定的一段網址列上去? 05/21 14:54
63F：→ Luos:打個比方 就像dropbox一樣 我點開Photos的folder 05/21 14:56
64F：→ Luos:網址會加上/Home/Photos 但是實際上我是到別的php去把html lo 05/21 14:57
65F：→ Luos:od回來? 05/21 14:57
67F：→ xiphoid:上下一頁內容不會更新 而且重新整理也破功 放棄... 05/21 16:33
68F：→ Luos:我已經在改他的source code了 不過上下頁兩曾就會失敗 05/21 16:41
69F：→ Luos:重新整理 不會改.... 05/21 16:41
70F：→ xiphoid:重新整理沒辦法 網站上就是沒這個檔案或route 05/21 16:48
71F：→ xiphoid:或許放棄pushState改用hash當history吧 05/21 16:48
72F：→ Luos:這是個好想法 還是很好奇dropbox怎麼辦到的~ 05/21 16:56
73F：→ xiphoid:有什麼原因不能讓pjax直接讀網址? 05/21 17:08
74F：→ Luos:其實比較重要的是希望能像db一樣能用上一頁來回到上一層 05/21 17:12
75F：→ Luos:網址列變成只是路徑 實際上檔案放置是我自己定義的 05/21 17:14
76F：→ xiphoid:網址不需要直接對應檔案 /index.php/abc 05/21 18:20
77F：→ xiphoid:/index.php/abc/def 這些網址都能用index.php來處理 05/21 18:20
78F：→ xiphoid:(用$_SERVER['REQUEST_URI']判斷) 05/21 18:20
79F：→ xiphoid:配合mod_rewrite能再把網址的index.php去掉 05/21 18:20
80F：→ xiphoid:pjax.heroku.com/ 也不是真的有dinosaurs.html 05/21 18:25
82F：→ Luos:Heruku那個不是用pjax嗎？ 05/21 23:39
83F：→ Luos:RequestURI原來可以這樣用 明天試試 05/21 23:42
84F：→ Luos:說起來amazon ec2 跟openstack 好像也是類似的方法說 05/21 23:44
85F：→ xiphoid:heroku那個是pjax 但實際上沒有那些html檔案 05/22 09:13
86F：→ xiphoid:多數網站網址應該都不是對應檔案 web framework都有 05/22 09:13
87F：→ xiphoid:router可以用或者說只能這樣用 05/22 09:13
88F：→ Luos:不太想改server端的部分... 05/22 09:47
89F：→ Luos:這種做法有沒有麼關鍵字=3= 我想查查.. 05/22 10:07
90F：→ xiphoid:Front Controller 05/22 10:15
91F：→ Luos:我倒是看到很多用explode來弄.... 05/22 10:21