- ベストアンサー
プルダウンメニューからリンク→新しい(別)ウインドウで表示
プルダウンメニューから「ＧＯ］ボタンを押してリンク先へ飛ぶ。 このような形を作っているのですが，「ＧＯ」ボタンを押したときに 新しいウインドウを開いて表示させたいのですが，その方法を教えて いただけないでしょうか。。 過去ログから見つけられませんでした・・・。すみません。。
- seapassion
- お礼率21% (62/287)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
とりあえず、ソースが少々大きくなりますが、onClick内でスクリプトを完結させたいのであれば、 <input type=button value="ボタンの文字" onClick="window.open(this.form.navi.options[this.form.navi.selectedIndex].value,'_blank','toolbar=1, location=1, directories=1, status=1, menubar=1, scrollbars=1, resizable=1')"> こういう書き方もあります。 もし関数として一連の処理をまとめて記述できるなら、<script>タグで関数を定義した方が、ソースの見通しが良くなって、メンテナンス性が上がると思います。 その場合は、 <html> <head> <script type="text/javascript"> <!-- function link_open(){ linkurl=document.lin.navi.value; window.open(linkurl,"_blank","toolbar=1, location=1, directories=1, status=1, menubar=1, scrollbars=1, resizable=1");} // --> </script> </head> <body> <form name="lin" method=post> <select name="navi"> <option selected>選んでね。 <option value="1.htm">一つ目 <option value="1.htm">一つ目 </select> <input type="button" value="ボタンの文字" onClick="link_open()"> </form> </body> </html> このような書き方もできます。 一応、IE6とNetscape7で動作確認を取りました。 こちらの方法をお試しになる場合は、formタグにnameを追加することに注意してくださいね。 参考になれば幸いです。
その他の回答 (2)
- Kizz
- ベストアンサー率47% (30/63)
seapassionさん、はじめまして。 参考までに。 location（アドレスバーのオブジェクト）を指定して行いたい！という事であれば 「location.target」というプロパティメンバを使えば表示先が変更できます。 通常何も指定しない場合は"_self"自分自身を指すため、自ページ上に遷移 （ページ切り替わり）がされます。 これを"_blank"と指定すれば、別ウインドウを指し別ウインドウ上に表示されます。 ※target の指定値は、location だけでなく form などの target プロパティメンバ共通です。 備考） なお、<a>タグなどでjavascriptを使用せずに素直にHTMLタグ属性上に target="_blank"など と書ける場合には、target 指定による別ウインドウ指定をしたりしますが、そうでない場合 は window.open() を使用する方がメジャーかと思います。 windows.open()の良いところは、width,height 指定にってウインドウのサイズを指定を できる事や、メニューバーやリサイズ・スクロールのON/OFF指定できるなどがあります。 ページの遷移の場合には、あまりこのような利点は必要ないと思いますが‥、子ウインドウ 的なページを表示する際には、window.open() を使用する事をお勧めします。 また、onClick="" の中に長く文を書くのは通常ありませんので、１行ですまない場合には、 オリジナルのjavascript関数を作成し、その関数に必要があれば引数を渡すなどに、処理 は関数内で行うようにする方が、ソース的にスマートですね。 関数の定義の例は以下のように‥ <script language="JavaScript"> <!-- function next_page( filename ) { location.target = "_blank"; location.href = filename; } //--> </script> 呼出の所は以下のように‥ <input type=button value="ボタンの文字" onClick="next_page(this.form.navi.options[this.form.navi.selectedIndex].value)"> になります。 上記、実装してのテストとかしてませんので誤字あったらすみません。 がんばって見て下さい。
お礼
はじめましてっ。。 とてもわかりやすい解説ありがとうございますっ。 すごく参考になりました。 こういうときって、ポイントをどちらにあげるか迷うのですよね・・。。 っで、申し訳ございませんが、２度手間をとらせてしまった#1さんに２０pt。 kizzさんに１０pt差し上げます。 本当はお二人に１００pt差し上げたいのですが・・。 ご了承ください。。
JavaScriptを利用しているものと判断してアドバイスしますが… JavaScriptのスクリプトの中の、 location.href=リンク先のURL; となっている行はありませんか? その部分の記述を、 window.open("リンク先のURL","_blank","toolbar=1, location=1, directories=1, status=1, menubar=1, scrollbars=1, resizable=1"); に置き換えれば、常に新しいウィンドウでリンク先を開くようになると思います。 新しいウィンドウを一つ開いてリンク先を呼び出した後、元のプルダウンメニューから別のページを呼び出したときに、さっき新たに開いたのと同じウィンドウ内にそのページを表示させたい場合は、「"_blank"」に適当な名前を記入すると良いと思います。 見当違いでしたらごめんなさい。
補足
javascriptは使ってますが，下のようにソースを打ってます。。 <head> <style type="text/css"> <!-- input{border:1px solid #ffffff;background-color:#000000;font:13px;color:#ffffff;} select{font-size:13px;} --> </style> </HEAD> <BODY dbgcolor="#000000"> <form method=post> <select name="navi"> <option selected>選んでね。 <option value="1.htm">一つ目 <option value="1.htm">一つ目 </select> <input type=button value="ボタンの文字" onClick="location.href = this.form.navi.options[this.form.navi.selectedIndex].value"> </form> ご回答有難うございます。。この，スクリプトから出来ないでしょうか？？ すみません。。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
手間をかけさせてしまって申し訳ございません・・。 この方法でできましたっ！！！ 何か、目の前が開かれた気分です♪ 本当に感謝しています。 ありがとうございました。。