お仕事でiframeを使っているが、ちょっと困ったことがあったため、メモとして残しておく。
問題
iframeで表示されている内容がブラウザ側でキャッシュされるため、内容を差し替えても反映されない。
ファイルの内容が古くない場合はブラウザのリロードで取得しに行くときもあるが、一年以上前など古い場合は変更チェックすらブラウザは実行しないため、キャッシュをクリアしない限り反映されない。
このため、周知事項などが反映されず困ったことになる。
解決策
metaタグの指定でキャッシュを無効化すれば大丈夫そうだが、ブラウザによっては無効となってしまうのでボツ。
javascriptで明示的にリロードする方法もあるっぽいがお仕事の環境では上手くいかないためボツ。
いろいろ調べた結果、以下だけで対応可能なことがわかった。
<iframe src="http://hoge.com/index.html?no-cache" width="100%"></iframe>
要はsrcのurlにクエリを指定すればよい。上記では?no-cacheとしたが、？以降は別に何でもよい。意味のない文字列でも問題はない。これでfirefoxは必ずファイルの更新時刻をチェックしてくれるようになる。
だが、IEだとキャッシュ化されてしまい駄目だった。Chromeも同様である。
IEまで含めて対応させる場合は、以下のような形をとればよい。
<iframe src="http://hoge.com/index.html?{ランダムな数字}" width="100%"></iframe>
ランダムな数字を埋め込むことで、iframeの内容がキャッシュ化されることを防げる。IE・Chromeの場合もこれで常に取得されるようになる。
ただし、これはキャッシュ化を無効化するというよりは、無理やり別のアクセス先と認識させる回避策のため、ユーザの利用頻度が高いページでこれをやるとキャッシュが重くなるかもしれない。
