qq空間背景音樂是如何實現頁內跳轉時不間斷播放的?
12-28
最近剛開始學習做網站,實現背景音樂時,按照網上看的,用框架,搞一個隱藏的頁面放歌,這樣另一個重載入的時候音樂不斷。可是,我看網上說frame對搜索引擎不好扒不友好,我也看了各種大網站的html,都沒有frame這關鍵字,所以我的問題有:
1.frame這個標籤大家都不用嗎?如果用,frame標籤在什麼場合下用?
2.回歸標題,qq空間的音樂是如何實現的?
謝謝!
抱歉,我不用 QQ 空間,不過可以拿網易雲音樂做一個例子,網易雲音樂就是在頁面切換的時候,播放器不會被打斷,能持續播放。
如何不被打斷呢,就是頁面根本沒有跳轉,人家採用的是一種 SPA 的技術,即單頁面應用。比如網易雲音樂的推薦頁面的地址是:http://music.163.com/#/discover, 地址根本沒變,而只是 # 後面的 hash 在變。要了解的一些知識點:- hash change
- HTML5 pushState
自己找找研究下。
用 iframe 載入內頁
播放器在parent html里
內頁點播放,調用 parent 的播放器播放
點頂導僅是切換 iframe url
當前頁面沒有被load
播放器依然播放
關鍵詞hashbang,注意url地址帶#!的,基本就是這種設計。
原理就是hash(url#後面的部分叫做hash)改變,不會引起頁面刷新。
主要的技術有提到的,hashchange, history.pushState。
前者是點擊事件修改hash,觸發hashchange後,通過路由表(就是個數組或對象)檢測路徑並發起ajax、載入對應內容,後者就是推送url歷史的,使hashchange產生類似url跳轉的效果。本想給自己博客弄音樂的。
推薦閱讀:
※網站根目錄沒有索引文件 ( index.html ) 會影響 SEO 嗎?
※為什麼在 HTML 發展初期開發者使用表格元素排版?
※HTML5 中的 b/strong,i/em 有什麼區別?
※「Radio Button」的來歷是什麼?
※多年前對 XHTML 和 HTML5 的預測為什麼錯的這麼離譜?
TAG:網頁設計 | HTML | JavaScript | Flash開發 |