リロードHTMLボタン javascript:history.goとjavascript:location.reload

ページのリロードをボタンで表示する時に、使うタグ。

【リロード・最新の情報に更新F5 してください】と記載するより
リロードボタンがあった方が、直感的でブラウザに慣れていない人に
とっては、ユーザービリティが良いかと思う。

HTMLで記述するやり方があり、javascript:history.go(0) を
紹介しているところが目立つがFireFoxに対応していない。
しかし、ご安心 javascript:location.reload() なら対応している。

記述例○:FireFoxおよびIEやSafariなど主要ブラウザ対応

<button onClick=”javascript:location.reload()”>ページを更新する</button>

記述例×:FireFox非対応のリロードボタン

<button onClick=”javascript:history.go(0)”>ページを更新する</button>

また、<button>タグでなくても<from>タグと<input>タグでも
HTML記述できるが<button>タグの方がカッコイイ。

<form><input type=”button” value=”更新する” onClick=”javascript:location.reload()”></form>

javascriptなので、携帯サイトには使えないが。
実際こんな感じ(リロードしても特に何も変わりません!)

このエントリーをはてなブックマークに追加
はてなブックマーク - リロードHTMLボタン javascript:history.goとjavascript:location.reload
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip

にほんブログ村 デザインブログ Webデザインへ 人気ブログランキングへ
管理人おすすめのレンタルサーバーまとめました

はてなブックマークに追加

コメントは停止中です。

MySQL無制限100GB ドメイン最安 X2レンタルサーバー

エックスツー

WordPress無制限も実現できるMySQL無制限の高速レンタルサーバー。

容量100GBの余裕のスペースにマルチドメインも無制限。密かに人気なのが、契約していれば.netなどドメインが850円と最安値で、別サーバーへのドメイン利用も可能。

PHPやCGIを高速にするXキャッシュ機能も搭載している X2レンタルサーバー