iframeのキャッシュが強すぎる件について

iframeで外部HTMlを呼び出す際に、キャッシュが強すぎちゃってなんかいつもと違う挙動になったりするんですよ。今回の最後にWordpressのプラグインでiframeのキャッシュだと気づかず丸一日潰してしまったお話もします。

iframeを呼び出す

このiframeですが、連続して使う場面というのはあまりないと思います。でも今回は何回も呼び出し続けたりした際にキャッシュが消えないってことをどう対処するのか。紹介します。

呼び出すパスにランダムなクエリを与える

呼び出すソースのパスに「~~/hoge.html?time=0123456789」というようなクエリをつけてあげるやり方。

var D = new Date();
var T = date.getTime();

上記の記述でUNIX時間を求めることができるのでこれをクエリにする方法もあります。

iframe内だけをリロード

「command + r」でページをリロードできると思いますが、これをiframe内だけで行う方法です。

$(".iframe").contentWindow.location.reload();

上記の記述でiframe内だけをリロードできます。ちなみに、reload(true)にするとスーパーリロードになるんだとか。

上記以外の方法

自分は上記の方法でやりますが、それでもキャッシュがクリアされない場合。 src属性に改めて読み込み先を指定し直す方法です。

var src = "hage.html";
$(".iframe").attr("src", "src");

また、これでもダメな場合には

var src = "hage.html";
$(".iframe").attr("src", "");
$(".iframe").attr("src", "src");

というふうに一度空っぽのsrcを読み込ませた後に読み込ませる方法もあります。読み込みタイミングもありうのでsetTimeoutをかませたほうがいいかもしれませんね。

これに出会ったお話

私がこれに出会ったのは「Moana - Contact Form Seven CF7 Builder use Visual Composer」こいつを使った時でした。 codecanyon.net

これ、Visual Composerをcontactfrom7にも使えるようにする有償プラグインなんですけど、編集すると該当するpostのurlを拾ってiframeで表示する仕組みなんですが…

編集して保存して、また別のcontactformを編集しようとさっき編集したフォームが編集画面に出てくるんですよ。これ、最初はプラグインのせいかなって思ってプラグインをコアファイルからHTTPリクエストとかをCharlesで監視したりしたんですよ。それでもおかしいところはなかったし、ブラウザのキャッシュとかを消してみても変わらず。

結局原因わからずじまいで、諦めながら編集画面のページのソース見て「iframeかーそっかー…」って思いながら別案件やって…

（数分後）

「（前の残ってるってことはやっぱりキャッシュだよなぁ）」って、jsとかhtmlのキャッシュだろうと思って検索で「html キャッシュ強い」でぐぐってたらこの記事に出会ったんです。

http://shinimae.hatenablog.com/entry/2015/12/09/182526

「iframeってキャッシュ強いんだー」って思って一度リロードさせてみたら

あっという間でした。 iframeのリロードようにローディング画面を作って解決ですよ。

なので、wordpress案件で「Moana - Contact Form Seven CF7 Builder use Visual Composer」を使うことがあったら気をつけてくださいね。

マメな人はバカであれ

バカなりに考えて、バカなりに行動します