プルダウンメニューからリンク→新しい(別)ウインドウで表示

解決済

質問者：seapassion
質問日時：2003/01/14 13:36
回答数：3件

プルダウンメニューから「ＧＯ］ボタンを押してリンク先へ飛ぶ。

このような形を作っているのですが，「ＧＯ」ボタンを押したときに
新しいウインドウを開いて表示させたいのですが，その方法を教えて
いただけないでしょうか。。

過去ログから見つけられませんでした・・・。すみません。。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.1

回答者： lead1976
回答日時：2003/01/14 14:27

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">

</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>

ご回答有難うございます。。この，スクリプトから出来ないでしょうか？？
すみません。。

補足日時：2003/01/14 14:53

通報する

- 0
- 件

通報する

No.2

回答者： Kizz
回答日時：2003/01/14 15:57

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">

</script>

　呼出の所は以下のように‥

<input type=button value="ボタンの文字" onClick="next_page(this.form.navi.options[this.form.navi.selectedIndex].value)">

　になります。

上記、実装してのテストとかしてませんので誤字あったらすみません。
がんばって見て下さい。

- 0
- 件

通報する

この回答へのお礼

はじめましてっ。。
とてもわかりやすい解説ありがとうございますっ。
すごく参考になりました。

こういうときって、ポイントをどちらにあげるか迷うのですよね・・。。

っで、申し訳ございませんが、２度手間をとらせてしまった#1さんに２０pt。
kizzさんに１０pt差し上げます。
本当はお二人に１００pt差し上げたいのですが・・。
ご了承ください。。

通報する

お礼日時：2003/01/14 19:49

No.3ベストアンサー

回答者： lead1976
回答日時：2003/01/14 17:26

とりあえず、ソースが少々大きくなりますが、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">

</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を追加することに注意してくださいね。

参考になれば幸いです。