にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

再読込ボタンを作る方法 [機能]

ブラウザの再読込ボタンと同じ効果のあるボタンをJavaScriptで作るには、location.reload();を実行するボタンを作れば良いだけです。reloadメソッドの引数に値trueを指定すると、キャッシュではなくサーバから強制的に再読込してくれるようです。

再読込ボタンを作る方法

現在表示しているページを再読込(リロード)するには、ブラウザのツールバーなどにある「再読込」ボタンを押すなり、キーボードから[F5]キーを押すなりすれば良いでしょう。
しかし、JavaScriptを使って、再読込させるためのボタンをページ上に作ることもできます。
例えば、以下のように。

何らかの理由でユーザにページを再読込して欲しい場合は、「ブラウザの再読込ボタンを押して」と指示するよりも、再読込を実行する独自のボタンを用意しておく方が操作しやすいかもしれません。特に最近はツールバーがほとんどない省スペースなUIのブラウザが増えましたし。

現在表示中のウェブページをJavaScriptで再読込させるには、以下のように記述します。

window.location.reload();

locationオブジェクトのreloadメソッドを実行するだけです。
再読込ボタンを作るには、以下のようにHTMLを記述すると良いでしょう。

<input type="button" value="このページを再読込します" onclick="window.location.reload();" />

まあ、あんまり使う機会はないかも知れませんけどね。(^_^;)

キャッシュからの再読込を許諾するか、サーバからの再読込を強制するか

このreloadメソッドには、正規の文法的だと引数はないっぽいですが、MDNの解説によるとtrue/falseの引数を指定可能みたいです。
その引数が使える場合は、以下のような動作になるようですね。

  • window.location.reload(true); =キャッシュデータではなく、ウェブサーバからデータを再読込する。
  • window.location.reload(flase); =ブラウザが持っているキャッシュデータを使って再表示して良い。

まあ、なかなか再読込ボタンをウェブ上に掲載しなければならないケースは少なそうに思いますけども。(^_^;)
何かの機会があればご活用下さい。(^_^;;;

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---