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