前提: 在撰寫這篇文章時,所測試的 Firefox 版本為 70.0

也許之後版本就更改和 Chrome, Safari 行為一致也不無可能

記得當初使用 Firefox 5x.x 版時,就曾經踩過這個類似的雷,重現流程是

  1. 瀏覽一個有 iframe src 的 html 頁面
  2. 打開 dev tool 更改 iframe 中的任意內容
  3. 點擊頁面上的任一連結(導內/外都可以)
  4. 觸發瀏覽器上一頁行為

然後會發現 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

2 Comments

  • Hello Camel,

    在處理 iframe 時遇到 cache 的問題,偶然看到你的文章,
    目前我用 JavaScript 設定 iframe src 處理。

    跟你打聲招呼!
    Willy (HopeBay Tech)

    • 哇嗚 Willy 好久不見,忙其他事以後文章都很少更新和過來看看 XDD

Leave a Reply