今天家族聚餐時，跟在念高中的表弟女兒推薦最近完成的作品「HTML5 FUN Player」，沒想到展示如何讓 YouTube 可以有雙語的字幕卻「凸槌」了！影片可以載入，字幕卻連選單都出不來。本來推想，會不會是同一部影片亂玩太多次，被 YouTube 擋掉了，哈！問題我也沒亂搞啊～這樣推論也不太合理。試了別部影片，可以正常顯示影片跟抓取字幕，所以就將範例影片多建立了幾筆，每次以亂數取用。再仔細地檢查了流程，找到問題點了！
最近的幾支程式，像「HTML5 FUN Player」下載 YouTube 字幕，「擷取 Google 日曆製作簡明行事曆」擷取 Google 行事曆，「HTML5 FUN : PARTDLE 兜一兜」的Google試算表查詢 ......，為了解決 JavaScript 的 CORS 限制，都使用到 CORS proxy 來誇域擷取資料。類似今天 YouTube 抓不到字幕的問題，在之前其實發生過，也解決過，但我還是忘了前車之鑑。
使用 CORS proxy 時，如果要擷取資料的網址是一樣時，要注意「快取」的問題，就像今天 YouTube 字幕的問題，當程式下載範例影片的網頁資料，因為網址都一樣的，CORS proxy 主機回傳來的網頁資料，因為「快取」的關係，都沒有更新，所以解析完的字幕設定值也是舊的，悲慘的是字幕設定的資料中帶有「有效時間」的設定，今天剛好超過了效期 (圖1)，所以 YouTube 網站的回應是找不到該字幕資料。
 |
| [圖1] YouTube 字幕檔網址的 expire 為有效時間(已過期) |
 |
| [圖2] HTML5 FUN Player 因字幕設定過期而回報無字幕 |
其實 JavaScript 設定檔快取的問題一直都在，HTML5 FUN 遊戲及工具，設定及題庫明明改過了，卻使用了舊的設定值，跟今天遇到的情形都是類似的。那要如何避免被快取呢？
如果網址相同就會被快取，那就讓每次的網址都不一樣吧！
底下利用時間來「搞怪」，讓網址每次都不同
var nocache = 'nocache=' + new Date().getTime();
上面這一行製作了一個叫「nocache」的參數，假設原來的網址是「url」，將它們合起來：
url += (/\?/.test(url)?'&':'?') + nocache;
如果原網址中有「?」了，就用「&」連結 nocache；反之則是用「?」來連接 nocache。
使用加料處理過的網址，快取問題就解決了。
發表文章
沒有留言:
張貼留言