jQueryでリンク先PDFのキャッシュ対策をするスニペット
WEB担当者にとって、「更新しましたー!」「変わってないよー!」「F5押して下さいー!」っていうのは永遠の定型文ですよね。
僕も、これまでの人生で何度キャッシュの説明をしてきたことかわかりません。
「ブラウザさんは早く表示しようと努力した結果として、保存してあるデータを見せてくれてるんですよー。ありがた迷惑ですよねー!」なんて言ってみたり・・・。
画像やHTML、CSSなんかは、テストアップの段階でURLパラメータを入れておけばよかったりもしますけど。
参考:クライアントへの仮アップ連絡の際、URLにパラメータ入れておくと楽。(MAKA-VELI.COM)
PDFの場合、更新ボタンでどうこうできるものでもない場合もありますし、環境によっても開き方が違ったりして、結局電話口でできる対応ってほとんどないと思います。
.htaccessを設定するか、URL末尾にパラメータを付けるかの選択になりますよね。
そこで、URLパラメータを自動でつけちゃえばPDFだけの差し替えで楽できるかも!?みたいなスニペットを書いてみました!
PDFのキャッシュ対策
jQueryの読み込み
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <a href="hoge.pdf">fuga</a>
最早ただのお約束ですね!
HTML側の準備はクラスを追加するだけです。
JavaScript
$(function() { var prmtime = $(".pdf").attr("href"); prmtime = prmtime + '?' + $.now(); $(".pdf").attr("href",prmtime); });
PDFファイルへのリンクに.pdfというクラスを設定し、リンク先URLとして、prmtimeという変数を定義。
それに現在時刻をURLパラメータとして追加しておいて、jQueryさんの力でhrefの中身を追加したものに書き換え。
PDF以外にも使ったりすることを考えて、クラスで設定できるようにしてみました。
$('a[href$=.pdf]')
なんかを使えば、サクっとすべての「拡張子pdfがついたもの」とかもできるかなあとも思いつつ。
改良版JSとか、素敵なキャッシュの説明とかあれば是非教えて下さい。
[追記]書きなおしました!
facebookで、それ複数PDFあったりしたら対応しなくない?っていうツッコミが入ったので、書き直してみました。
ついでに、拡張子が「.pdf」のものすべてに適応させるようにしました!
jQueryを呼び出して、これを記述するだけでOKです。
クラスでpdfとか指定しなくて良いので、こっちのほうが便利ですね。
function pdfaddprm(){ $("a[href$='.pdf']").each(function() { var prmtime = $(this).attr('href'); prmtime = prmtime + '?' + $.now(); $(this).attr('href',prmtime); }); } $(function(){ pdfaddprm(); });
内容としては、リンクタグの中で、hrefが「.pdf」で終わるものを探して、同じ事をする関数を作り、読み込み時に実行する形にしただけです。