前提: 在撰寫這篇文章時,所測試的 Firefox 版本為 70.0
也許之後版本就更改和 Chrome, Safari 行為一致也不無可能
記得當初使用 Firefox 5x.x
版時,就曾經踩過這個類似的雷,重現流程是
- 瀏覽一個有 iframe src 的 html 頁面
- 打開 dev tool 更改 iframe 中的任意內容
- 點擊頁面上的任一連結(導內/外都可以)
- 觸發瀏覽器上一頁行為
然後會發現 iframe 的內容仍然是你更改後的內容
在 Firefox 官方上也有許多 iframe cache 相關的 issue,像是以下:
https://bugzilla.mozilla.org/show_bug.cgi?id=356558
https://bugzilla.mozilla.org/show_bug.cgi?id=1349921
當初有一系列的解決辦法:
- 為 iframe src 加上 cache-buster
- 為 iframe name 加上 cache-buster
- 為 iframe id 加上 cache-buster
時至今日,再來測試一次,上方的解法在 Firefox 都已經不適用
根據最近的一篇的 Firefox issue ,目前會根據 http header 的 Cache-Control
header 來決定是否 cache iframe 和網頁內容.(Cache-Control
用法可參考此篇)
因此若要跟其他瀏覽器(chrome, safari…)相同行為,目前要記得將 iframe 和網頁帶上相對應的 Cache-Control
header
Cache-Control: private, no-cache, no-store, must-revalidate, max-age=0
參考資料:
https://stackoverflow.com/questions/2648053/preventing-iframe-caching-in-browser