jQuery で html 読み込みすると、キャッシュされて困る の巻
またまたキャッシュネタですわ…。
jQuery で html 読み込みをしたいのは、Webページのヘッダーやメニューやフッター(環境などによって表示が遅れることがあるので、ヘッダーやメニューはあまりオススメしませんけど…。)などだと思いますが、ニュース、トピックスには使いたい所ですよね。
head内に、下記のように記述するだけなので、超カンタンです。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#topicsbox").load("topics.html");
})
</script>
読み込みたいファイルはtopics.html、読み込みたい場所に、
<div id="topicsbox"></div>
としておきます。
id= なので、スクリプト内の記述はCSSと同じ # 付きになります。 なので、もし読み込み先が class= の場合は、. 付きになります。もちろん。レイアウト、飾り付けは CSS に記述します。
すると、1回目はうまくいくのですが、topics.html を書き換えても、表示が変わらない!また、いろいろさわって、直して、試して、ストレスがあああああ…。前回と同じパターン。
そこで、キャッシュしないという指定ができます。下のように追加します。
$.ajaxSetup({
jQuery で html 読み込みをしたいのは、Webページのヘッダーやメニューやフッター(環境などによって表示が遅れることがあるので、ヘッダーやメニューはあまりオススメしませんけど…。)などだと思いますが、ニュース、トピックスには使いたい所ですよね。
head内に、下記のように記述するだけなので、超カンタンです。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#topicsbox").load("topics.html");
})
</script>
読み込みたいファイルはtopics.html、読み込みたい場所に、
<div id="topicsbox"></div>
としておきます。
id= なので、スクリプト内の記述はCSSと同じ # 付きになります。 なので、もし読み込み先が class= の場合は、. 付きになります。もちろん。レイアウト、飾り付けは CSS に記述します。
すると、1回目はうまくいくのですが、topics.html を書き換えても、表示が変わらない!また、いろいろさわって、直して、試して、ストレスがあああああ…。前回と同じパターン。
そこで、キャッシュしないという指定ができます。下のように追加します。
$.ajaxSetup({
cache: false });
$(function(){$("#topicsbox").load("topics.html");})
これでtopics.html更新すれば、すぐに書き換えされます。うまくいって気持ちいい!キャッシュの停止が、jQuery の他の部分にどう影響するかは・・・知りません。それは、またの機会があれば調べてみましょう。
現金の方ならいくらでも欲しいのですが、キャッシュの仕組みは開発者にイタズラばかりします。しかし、通信を減らして表示を速くする効果が世界的に効いてると思えばガマンもできそうな気がします。え、あんまりしないって?!