看板 Ajax作者 Luos (Soul)標題 [問題] 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
推 knuckles:HTML5 History API1F 05/17 14:49
→ Luos:這樣IE7 8 怎麼打的開=3=2F 05/17 14:56
→ xiphoid:不支援就普通的讀取新網頁3F 05/17 14:58
→ Luos:我手邊居然沒有IE7能試...4F 05/17 15:04
→ xiphoid:呃 剛剛測試 ie8用hash當fallback5F 05/17 15:05
→ Luos:我在網址列直接輸入www.dropbox.com/home/Photos也行
這不是History API 作的吧6F 05/17 15:09
→ xiphoid:html5 history api只是能不靠hash hack改網址不重讀網頁跟有上/下一頁紀錄 網頁內容怎麼產生不是它的業務8F 05/17 15:17
→ Luos:html5demos.com/history 也能做到上下頁說10F 05/17 15:23
推 mesak:HTML5 history.pushState11F 05/17 20:57
推 Canboo:TML5 History無誤，請研究完再來質疑12F 05/17 22:02
→ Luos:研究中 希望能生出來13F 05/17 22:45
Asual | jQuery Address Samples
Creates open source software and provides professional services for its integration. The home of SWFAddress and jQuery Address. ...
→ Luos:Pjax看來不錯 來玩玩看
Popstate 之後怎麼history.state是null....16F 05/18 12:10
→ Luos:pjax 沒有fallback... 改完History.js 好了
眼花了 pjax 有fallback
我輸了 能不能推薦pjax的教學或sample...
xiphoid大的網站到底怎麼運作的? 完全看不出來Orz
找到的範例都只有一行 $('a').pjax('#main');為什麼能夠運行?20F 05/18 14:53
→ xiphoid:那個網站就一般靜態網頁而已 上面選單是Chosen快速搜尋用沒用pjax的情況就很平常的一堆html連來連去
用pjax後變成由ajax讀html改內容+history api改網址
$('a').pjax('#main')是把網頁的'a'綁click事件做上上個推文的行為 #main是放新網頁內容的dom
自己網站內部連結以/開頭 所以用$('#main a[href^="/"]')不過剛發現pjax似乎會自己判斷 cross origin就跳過25F 05/21 12:48
→ Luos:謝謝xiphoid大詳細的解說 我想問的是 第一個網頁裡哪裡有pjax是在requireJS裡? 我查的requireJS跟pjax 沒關係說=3=
$('a').pjax('#main') 讓我無法理解的部分是 a沒有preventDefault 不是會開啟網頁嗎 至少我自己做的會=3=
再來就是 哪裡定義URL? pjax會直接讀取a的href?
git上面寫得option裡面有url的定義 url寫在option裡面雖然成功 但是所有的a都連到同一個網頁也沒意義就是了=w=
謝謝xiphoid大願意回文教我 <(_ _)>32F 05/21 13:09
→ Luos:我剛好也在看pjax的jquery 為什麼google這麼久都沒想到要去檔案咧=3= data-pjax這個attr一定要嗎?44F 05/21 13:38
→ xiphoid:有 source code 有真相
不用data-pjax就要用.pjax('#container')定義內容填哪46F 05/21 13:40
→ Luos:這就是說pjax是到href去把html撈出來 這跟我\要做的有點微妙的不同 我是要從php把html撈出來 再把href裡的url push到網址48F 05/21 13:58
→ xiphoid:可以直接$.pjax({url: '/authors', container: '#main'})不用透過<a>50F 05/21 14:04
→ Luos:列 還有個疑問 沒設定fragment不就會把整個html load回來嗎?對吼... 只不過這樣就不能用href來存假網址了52F 05/21 14:04
→ xiphoid:"pjax on the server side" 能從header盼斷是不是pjax54F 05/21 14:15
→ Luos:那就是要在server判斷 如果是pjax就只傳部分的html?
這樣要跟三方的網頁兼容就很困難了
$.pjax 的話沒有href 怎麼pushState...?55F 05/21 14:20
→ xiphoid:直接傳新網址給$.pjax *url: '/authors'*58F 05/21 14:23
→ Luos:/authors 會被push到網址列?59F 05/21 14:35
→ Luos:有沒有辦法push我指定的一段網址列上去?
打個比方 就像dropbox一樣 我點開Photos的folder
網址會加上/Home/Photos 但是實際上我是到別的php去把html lood回來?62F 05/21 14:54
→ Luos:我已經在改他的source code了 不過上下頁兩曾就會失敗
重新整理 不會改....68F 05/21 16:41
→ xiphoid:重新整理沒辦法 網站上就是沒這個檔案或route
或許放棄pushState改用hash當history吧70F 05/21 16:48
→ Luos:這是個好想法 還是很好奇dropbox怎麼辦到的~72F 05/21 16:56
→ xiphoid:有什麼原因不能讓pjax直接讀網址?73F 05/21 17:08
→ Luos:其實比較重要的是希望能像db一樣能用上一頁來回到上一層
網址列變成只是路徑 實際上檔案放置是我自己定義的74F 05/21 17:12
→ xiphoid:網址不需要直接對應檔案 /index.php/abc
/index.php/abc/def 這些網址都能用index.php來處理
(用$_SERVER['REQUEST_URI']判斷)
配合mod_rewrite能再把網址的index.php去掉
pjax.heroku.com/ 也不是真的有dinosaurs.html
aliens.html 而是http://goo.gl/RTTwQ76F 05/21 18:20
→ Luos:Heruku那個不是用pjax嗎？
RequestURI原來可以這樣用 明天試試
說起來amazon ec2 跟openstack 好像也是類似的方法說82F 05/21 23:39
→ xiphoid:heroku那個是pjax 但實際上沒有那些html檔案
多數網站網址應該都不是對應檔案 web framework都有
router可以用或者說只能這樣用85F 05/22 09:13
→ Luos:不太想改server端的部分...
這種做法有沒有麼關鍵字=3= 我想查查..88F 05/22 09:47
→ xiphoid:Front Controller90F 05/22 10:15
→ Luos:我倒是看到很多用explode來弄....91F 05/22 10:21
--