Ads by Google
新しい記事を書く事で広告が消せます。
--年--月--日
新しい記事を書く事で広告が消せます。
2006年09月30日
戻るボタンを設置しましょう（JS初級）
ここのリンクは原則target="_blank"なしの、別ウインドウ(別窓)で開かないようになっています。詳しくはコチラ→リンクを別ウインドウ（別窓）で開かないようにしました。
参照先に飛んでそのあと、戻るときに、ブラウザの『戻る』ボタンをクリックすれば元のページに戻れるのですが、記事の最後に、同じ働きの[戻る]ボタンを設置しておくと、訪問してくれている人が元のページに戻りたいと思ったときに、マウスを大きく動かさなくてもいいので便利ですね。
利用者がスクリプトを使わない環境の場合もあるので、URLに"javascript"を使うこの方法は好ましくないようです。ただ、この記事の[戻る]ボタンについては、スクリプトを使わない環境で動作しなくても、ブラウザの[戻る]ボタンを使えばいいので、特に問題はないと思われます。yozoはこれを使用していますが、強くおすすめできるものではありません。
参照先に飛んでそのあと、戻るときに、ブラウザの『戻る』ボタンをクリックすれば元のページに戻れるのですが、記事の最後に、同じ働きの[戻る]ボタンを設置しておくと、訪問してくれている人が元のページに戻りたいと思ったときに、マウスを大きく動かさなくてもいいので便利ですね。
<input type="button" name="backbutton" id="backbutton" value="戻る" onclick="history.back()" onkeypress="history.back()" tabindex="50" accesskey="p" />
history.back()で、1つ前の履歴に戻ります。ボタンがクリックされたときに1つ前の履歴に戻るようにしたいので、onclick="history.back()"としました。また、onclickをサポートしていないブラウザもあるといけませんから、同じ内容のonkeypressも設定しておきましょう。
value="戻る"は、ボタンに表示される文字です。自由に変更してください。
tabindex="50"は、[Tab]キーを押したときに、フォーカスする順を表します。
accesskey="p"は、IEの場合、[Alt]+[設定した値(ここではp)]でそのボタンをクリックできます。(Macは[Ctrl Key]+[設定した値])
ボタンでなくて戻るのように、URLにJavaScriptを使って簡単に設定することもできます。
<a href="javascript:history.back();">戻る</a>
利用者がスクリプトを使わない環境の場合もあるので、URLに"javascript"を使うこの方法は好ましくないようです。ただ、この記事の[戻る]ボタンについては、スクリプトを使わない環境で動作しなくても、ブラウザの[戻る]ボタンを使えばいいので、特に問題はないと思われます。yozoはこれを使用していますが、強くおすすめできるものではありません。
↓ ぽちっと応援お願いします♪ m(_ _)m
≪New 0610掲示板♪ | Top | 107代目進化バトン Old≫
トラックバックURL
トラックバック
≫ 戻りたい？戻りたくない？？ from 果報は寝て待て(-_☆)
先日(９/３０)yozoさんトコで『戻るボタンを設置しましょう（JS初級）』という記事がありました。そこでふと思い付いたネタを一つ。戻れないボタンとかって作れないのかなぁ〜って(ﾟ▽ﾟ；)やってみて、BLOGでは全く持って使い道が浮かびません(爆)ま、ネタってゆーコトで� [Read More]
コメント
(ﾉﾟωﾟ)ﾉ*.ｵｵｫｫｫｫｫｫｰすごいボタンが出現してますねぇ！
こういうのを思い浮かぶyozoさん・・やはり常にお客さん目線なんですね。
見習わなくっちゃなぁ〜φ(･ω･*)ﾌﾑﾌﾑφ(｡_｡*)ﾒﾓﾒﾓ
またまたブックマークさせていただきますね！
いつもためになる記事をありがとうございます〜♪
Posted by モンビッケ at 2006.09.30 21:56 | edit
コメント
＞(ﾉﾟωﾟ)ﾉ*.ｵｵｫｫｫｫｫｫｰすごいボタンが出現してますねぇ！
えへへ・・・ありがとーございまっす♪とても励みになりまっすv(｡･ω･｡)ｨｪｨ♪
でも、簡単なんですよ。backというメソッドを使うだけですからね。
histry.back()と書くだけなんです。(＝⌒▽⌒＝) ﾆｬﾊﾊﾊ♪
＞こういうのを思い浮かぶyozoさん・・やはり常にお客さん目線なんですね。
いえいえ♪実はyozoはブラウザを使いこなせていないのですよ。
リンク先へ飛んで、うろちょろして、元に戻れなくなってしまうことって多いのです。それで[戻る]ボタンのあるページはありがたいなぁ~ってずっと思ってましたからね。yozoはどんくさいから、思いつくのかもしれませんね。(ﾟｍﾟ*)ﾌﾟｯ
いつも、ブックマークしてくださってありがとーございまっす♪
これからも、いい情報を発信できるようにがんばりまっす m(_ _)m
Posted by モンビッケさんへ at 2006.09.30 22:35 | edit
コメント
本当にいろんな技に挑戦されていますね。
JavaScriptでいろいろやってみたいことはあるのですが、
どれも中途半端で放置しております。(苦笑)
こうしてJavaScriptを分かりやすく書いていただけるのは非常に
有難いなぁと思います。
また勉強させていただきます!!ありがとうございます。＜(＿ ＿)＞
Posted by まゆび at 2006.09.30 22:50 | edit
コメント
そういうことが、出来るんですね(*'0'*)
こういうボタンが、あると便利ですよね。
よく、ホームページなどを見ると、ボタンの中に、『next』とか『back』とか、書いているので、どうやってやるのだろうと思っていました。
勉強になりましたm(_ _)m
Posted by ネーちゃん at 2006.10.01 00:36 | edit
コメント
＞本当にいろんな技に挑戦されていますね。
(///∇//)ﾃﾚﾃﾚ あはは・・・そんな、挑戦というカッコイイものでもないのですが、
JavaScript初級ですからね。使い方や慣れるための『初級』のつもりなんです。
＞また勉強させていただきます!!ありがとうございます。＜(＿ ＿)＞
いつでも、その気になったときにチャレンジしてみてくださいね♪＼(*⌒0⌒)ｂがんばっ♪
といいつつ、yozo自身も『気が向いたと記』にしか、取り組んでいないのですけどね(ﾟｍﾟ*)ﾌﾟｯ
Posted by まゆびさんへ at 2006.10.01 08:23 | edit
コメント
＞そういうことが、出来るんですね(*'0'*)こういうボタンが、あると便利ですよね。
そうでしょ♪ちょっとしたことですけど、重宝すると思いますよ。
yozoもここの記事では、次の２つに早速設置しました。一度お試しあれ。
掲示板
http://yozoblog2.blog63.fc2.com/blog-category-24.html
●『yozoの気が向いたと記2.0』の読み方♪
http://yozoblog2.blog63.fc2.com/blog-entry-354.html
＞よく、ホームページなどを見ると、ボタンの中に、『next』とか『back』とか、
＞書いているので、どうやってやるのだろうと思っていました。
history.go()を使っているのだと思います。マウスカーソルを当てて見たり、
ページのソースを見たりして、チェックすればいいと思いますよ。
そこだけを見るのは意外と簡単です。(*^-^)
Posted by ネーちゃんさんへ at 2006.10.01 08:36 | edit
コメント
「戻る」ボタンですかー。
時々こういうボタンを設置されてるページを見かけますが
これは便利ですねぇぇ☆
ちょっとした手の動きでもすぐに手が届く方が
無精者の私としては有難いので・・・（笑）
あー今日はうさも殿、お出かけですか。。
ナニナニ。。
「沙耶」殿の所へ行くとな。。
ちょっと追いかけてきます！
Posted by babar at 2006.10.01 18:06 | edit
コメント
＞時々こういうボタンを設置されてるページを見かけますがこれは便利ですねぇぇ☆
そうでしょ♪実はこれには理由があるのですよ♪参照先の文章を読んだ後に「戻る」がないと、そのままお帰りになることが多いと思われることと、別ブログの解説を流用しようという悪巧みがあったりして・・・CLEVER BBSの使い方の記事を用意しそこねたので、yozo本の記事を参照させようかと・・・これは内緒ですよ♪(ﾉ∇≦*)ｷｬﾊｯｯｯ♪
＞ちょっとした手の動きでもすぐに手が届く方が無精者の私としては有難いので・・・（笑）
あはは・・・そうおっしゃていただけたら、うれしいですよ♪(^○^)
＞あー今日はうさも殿、お出かけですか。。
＞ナニナニ。。「沙耶」殿の所へ行くとな。。ちょっと追いかけてきます！
「ばばるさん、いつもありがとー♪うれしいなわぁいヽ(ﾟｰﾟ*ヽ)(ﾉ*ﾟｰﾟ)ﾉわぁい」by うさも
ふふふ・・・今日はyozoも追っかけましたよ（ΦωΦ）ふふふ････ by yozo
Posted by babarさんへ at 2006.10.01 18:50 | edit
コメント
うふふ☆こういう記事を読んでもちんぷんかんぷんだった私が、ちょっとは記事の意味が理解できるようになってきたのもyozoちゃんのお陰だなぁーって・・・。思いながら読んでいました♪
うんうん。
私でもちょっと意味が分かるぞ♪最近分かるようになってきたぞ♪
って・・・。なかなか時間がなくて自分で取り組むことが出来ないでいるけど、本当に勉強になるなぁーと思っているんだぁ♪
戻るのボタン♪
これ便利だね♪うんうん♪
こちら側に対する気配りがとってもyozoちゃんらしいなぁーっておもったよーー♪
さすがです!!!
Posted by enu at 2006.10.02 14:01 | edit
コメント
＞うふふ☆こういう記事を読んでもちんぷんかんぷんだった私が、ちょっとは
＞記事の意味が理解できるようになってきたのもyozoちゃんのお陰だなぁーって・・・。
そんな風に思っていただけたら、うれしいですよ♪でも、慣れてきたらわかってくるでしょ♪
yozoもそうでしたからね。はじめは、☆!☆?☆ (☆＿◎) ☆!☆?☆ﾁﾝﾌﾟﾝｶﾝﾌﾟﾝ でしたよ♪
＞戻るのボタン♪これ便利だね♪うんうん♪
ふふふ・・・もしもよろしかったら、<input>タグをコピペすればできますよ。
簡単ですからね。お試しアレ('-'*)ｴﾍ
Posted by enuちゃんへ at 2006.10.02 17:44 | edit
コメント
私もコレ、やろうと思ってたんですよね。
でも修正とかが面倒で、「また次回のテンプレ作成時に一緒にやろう(-_-；)」って思ってたんですよ(笑)
サクっと作業に取り掛かれるyozoさんを少しは見習いたいと思いました・・・（。。；）
…((＿A＿)ノ” ﾀﾞﾗﾀﾞﾗ
Posted by Ｐａｖ at 2006.10.03 17:47 | edit
コメント
＞私もコレ、やろうと思ってたんですよね。でも修正とかが面倒で、
＞「また次回のテンプレ作成時に一緒にやろう(-_-；)」って思ってたんですよ(笑)
ありゃ？そうだったのですか？実はこのJavaScriptネタは随分前からあったのです。
ただ、ここでソース配布しているusamoskinの修正のネタになったので、
今回その前触れの記事としてこの記事を出したのです。(^○^)
けっしてサクサクしていたわけじゃなかったりするわけなんですよ♪
これは内緒ですけどね・・・（ΦωΦ）ふふふ････
Posted by Pavさんへ at 2006.10.03 21:34 | edit
コメント
戻るリンク、便利ですよねぇ〜♪
Firefoxでマウスジェスチャーを設置し始めてから、IEで戻るリンクがナイとチョットだけメンドくさく思えてた今日このごろで(笑)
・・・といっても、自分トコのテンプレートには入れてナイのですが（￣▽￣；）(爆)
チョコっとyozoさんの記事にかぶせてウチでもネタを仕込ませていただきました。
とゆーワケで、TBさせていただきたいと思いまふ♬♫
Posted by Ｐａｖ at 2006.10.11 12:16 | edit
コメント
＞戻るリンク、便利ですよねぇ〜♪Firefoxでマウスジェスチャーを設置し始めてから、
＞IEで戻るリンクがナイとチョットだけメンドくさく思えてた今日このごろで(笑)
戻るリンクは参照ページには付けておいて欲しいですね。それはともかく、
『Firefoxでマウスジェスチャー』φ(ﾟ-ﾟ=)ﾒﾓﾆｬﾝ、またFirefoxのヒントを
ありがとーございまっす♪勉強しよっとヾ(￣o￣;)ﾁｶﾞｳｯﾃﾊﾞ､､､
＞チョコっとyozoさんの記事にかぶせてウチでもネタを仕込ませていただきました。
＞とゆーワケで、TBさせていただきたいと思いまふ♬♫
あはは・・・いつもトラバしてくださってありがとーございまっす♪m(_ _)m
Pavさんはreplaceを使ってのジャンプボタンを作っていましたね。とっても
興味深かったですよ。記事での紹介及びトラバありがとーございまっす♪
こちらからも、お返しトラバさせていただきました。m(_ _)m
Posted by Pavさんへ at 2006.10.11 19:07 | edit
コメント
＞『Firefoxでマウスジェスチャー』φ(ﾟ-ﾟ=)ﾒﾓﾆｬﾝ、またFirefoxのヒントをありがとーございまっす♪勉強しよっとヾ(￣o￣;)ﾁｶﾞｳｯﾃﾊﾞ､､､
か〜な〜り〜便利ですよ、マウスジェスチャー。
まだ私も使い始めたトコなんですが、イイですよコレ！！
IEに戻りつつあったメインのブラウジングが、またFirefoxになりつつあります(笑)
また記事書いておくんで、よかったら参考にどぞ〜♪
Posted by Ｐａｖ at 2006.10.12 01:26 | edit
コメント
＞か〜な〜り〜便利ですよ、マウスジェスチャー。
＞まだ私も使い始めたトコなんですが、イイですよコレ！！
えっ？そんなに便利ですか？w(￣o￣)w ｵｵｰ!
やっぱり速攻で調べるべきだったかも・・・ｶﾞ━━(=￣□￣=)━━ﾝ!!
＞また記事書いておくんで、よかったら参考にどぞ〜♪
おおお・・・なんと♪ありがたいことですぅ~♪どんな機能なのでしょうね。((o(*^^*)o))わくわく
このあとお邪魔させていただきまっす♪ ε=ε=ε=ε=ε=ヾ(э^・ｪ・^)эﾆｬﾎｰ
Posted by Pavさんへ at 2006.10.12 08:33 | edit