ブラウザにJavaScript等コンテンツをキャッシュさせない 1行のコード

2014年4月4日2019年4月24日

タグ: JavaScript, コンテンツ, ノウハウ, ブラウザ, ブログ, 便利

このブログに、ライブドアの相互RSSを設置してしばらく経ちました。設置した当初はちょっとしたトラブルがありました。

このブログでの相互RSSの表示はJavaScriptで行っているため、ブラウザなどによっては、JavaScriptがブラウザにキャッシュされてしまい、RSS更新があってもなかなか表示の内容が更新されないという現象が起こっていました。

ブラウザのキャッシュ機能は便利な反面、更新の多いページでは逆に邪魔な存在になります。

サーバ上では更新されているのに、キャッシュが表示されるばかりで更新が反映しないということがあります。

ブラウザのキャッシュを制御する/no-cache

相手先の更新がすぐに表示されないと相互RSSとは言えないので、解決策を探ったところ、たった1行のHTMLのmetaタグでJavaScriptのキャッシュをさせない設定が出来る事を知りました。

Contents

ブラウザでキャッシュ禁止する為のコード

対応しているブラウザでは以下の1行のコードを入れることによって、JavaScriptなどのコンテンツがブラウザ側にキャッシュされないようになります。

<meta http-equiv="Pragma" content="no-cache">

このタグはhead要素の中で記述します。

<meta http-equiv="Cache-Control" content="no-cache">

というのもありますが、こちらも内容はいっしょです。自分好みのメタタグをヘッダー要素に追加しましょう。

JavaScript などで頻繁に更新されるコンテンツを表示しているようなサイトやブログは、ブラウザ側にページの内容をキャッシュをされないようなコードを入れるか、キャッシュの有効期限を短めに設定しておきましょう。

既にブラウザにjavaScriptのキャッシュが残っている場合は、後からこのコードを入れても効果ありません。（ブラウザのキャッシュが削除されるわけではないため）

その場合は先にブラウザに残っているjavaScriptのキャッシュを消してください。キャッシュの削除方法はブラウザによって異なります。