webdev - hothero's TechNote

Mobile Safari Page Auto Refresh Limitation

最近有個客戶告知網站在手機看會一直自己重新整理，後續追蹤才發現是 safari，而非所有瀏覽器都會。當時從幾個方向找：會不會是 vuejs 的關係？會不會是 vuejs 的套件，像是 vue-route 的關係？後端伺服器 node.js 的關係？還是安裝的第三方套件的關係，像是 optimizely？在確認都非開發端的問題後，合理懷疑是 safari 的關係，進而找到，原來 safari 有其可瀏覽網頁的限制！ MobileSafari keeps website cache only in RAM, and therefore, once it runs out of RAM,

javascript

Audio Player on HTML (Advanced)

There are some different approaches to make easy on playing audio by third-part tools on your website. Yahoo Media Player Using the Yahoo player is free. To use it you insert this piece of JavaScript at the bottom of your web page: <script

webdev

如何使用原生html播放音樂（基礎篇）

以下有幾種方式可以嵌入音樂在網頁中（已測試可在Chrome, Firefox, Safari下正常執行）使用embed 或 object <embed height="50px" width="100px" src="song.mp3" /> <object height="50px" width="100px" data="song.mp3" ></object> 注意事項： embed

javascript

How to implement a plurk-like timeline

Timeline is a popular issue in last 2011(because facebook). So how to implement a stunning timeline as your website core like plurk does ?? Now I organize some resources how to implement a plurk-like timeline (also called riverway) The first step is to create

javascript

透過修改原始碼解除網頁鎖右鍵限制 (Chrome Dev)

很多網站為了保護自己網站內容都會將該網站的右鍵、選取等功能鎖住，此篇文章主要是介紹用Chrome Dev的Inspector透過修改網頁原始碼將限制移除，其他方法就不再多述。圖片來源 Chrome Inspector 相信擅長網路開發或是略有而聞的讀者一定都知道FireBug這套出自於Firefox的Plugin（chrome也有，不過是Lite版），便是可以透過修改網頁原始碼即時在網頁上看到變化，而Inspector也可以說是chrome原生的FireBug，對於網頁開發員來說可說是必備工具！！如何破解開啟Inspector的方式有兩種，一種是透過右鍵->Inspect Element（如果鎖右鍵就沒用啦），另一種則是在功能表列上View -> Developer -> Developer Tools。出現Inspector後就是找尋鎖功能的程式碼啦，絕大部分都會放在body這個Attribute中（從最上面開始找起）。舉此網站來說，在body中他擺了三個javascript的event handler來做右鍵、拖曳、選取的鎖定。 <body id="article-main" class=

Subscribe to hothero's TechNote