iframe の画像と同じ画像を表示させていると、iframeを消した時に同じ画像が消える
2021年08月31日
問題
iframe の画像と同じ画像を表示させていると、iframeを消した時に同じ画像が消える
再現
再現を以下で行った
https://github.com/enoatu/report-chrome-iframe-no-cache-image
Chrome にて
docker-compose up -d
して、test.htmlを開き、開発者ツールで帯域制限をSlow 3Gにし、ボタンを押して動的にiframeを表示すると、iframe外の同じ画像が消えてしまう。
調査
起きる条件
- 要求の原因となったDOM要素が削除されました（つまり、IMGがロードされていますが、ロードが行われる前にIMGノードを削除しました）。
- あなたはデータのロードを不要にする何かをしました。 （つまり、iframeのロードを開始してから、srcを変更するか、内容を上書きします）
- 同じサーバーに送信されるリクエストが多数あり、以前のリクエストに関するネットワークの問題により、後続のリクエストが機能しないことが示されました（DNSルックアップエラー、以前の（同じ）リクエストはHTTP 400エラーコードなど）
解決策
この問題が2012年からあるため、Chrome側で解決されないのでは、と考えられる。 そのため、
- Cache Control no-cache にしない
- 読み込みが完了するまで img DOMを消さない
のふたつの選択肢が取れる