ママのスキンケアのお悩みにおすすめアイテム

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

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

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

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

参考になれば幸いです。
    • good
    • 0
この回答へのお礼

手間をかけさせてしまって申し訳ございません・・。
この方法でできましたっ!!!
何か、目の前が開かれた気分です♪

本当に感謝しています。
ありがとうございました。。

お礼日時:2003/01/14 19:46

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="" の中に長く文を書くのは通常ありませんので、1行ですまない場合には、
 オリジナルの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)">

 になります。

上記、実装してのテストとかしてませんので誤字あったらすみません。
がんばって見て下さい。
    • good
    • 0
この回答へのお礼

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

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

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

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

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>

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

補足日時:2003/01/14 14:53
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qセレクトボックスから別窓にジャンプするには

ここまで↓はたどりつけたのですが、

<select onchange="location.href=this.options[this.selectedIndex].value">
<option value="#">検索サイトにジャンプ
<option value="http://www.yahoo.co.jp/">Yahoo
<option value="http://www.google.co.jp/">Google
<option value="http://www.infoseek.co.jp/">Infoseek
</select>

選ぶと別窓(新しいページ)にジャンプするようにするには
どこに_blank(?)を入れればいいのでしょうか?
よろしくお願いします。

Aベストアンサー

以下でよいのでは?

<select onchange="url=this.options[this.selectedIndex].value;newwin=window.open(url,'_blank','width=400,height=300'); ">
<option value="#">検索サイトにジャンプ</option>
<option value="http://www.yahoo.co.jp/">Yahoo</option>
<option value="http://www.google.co.jp/">Google</option>
<option value="http://www.infoseek.co.jp/">Infoseek</option>
</select>

Qプルダウンメニューを選択したらリンク先へ別ウインドウに飛ぶようにしたい

全くの初心者です。
以下のようなソースでプルダウンを制作したのですが、
imputのボタンではなく選択したらすぐにリンク先へ別ウインドウで飛ぶようにしたいですが出来ません。
どなたか教えてください!


<form method="post" action="https://○○○○/reservationtop.asp">
<select name="○○○_cd">
<option value="12">1</option>
<option value="15">2</option>
<option value="21">21</option>
</select>
<input type="submit" value="送信">
</form>

Aベストアンサー

>>ANo.1
「document.b」って参照方法はIEの独自拡張機能。
IDを付けて「document.getElementById」を利用する方が無難。

後、別ウィンドウってことでformにtargetで別ウィンドウを指定すると良いでしょう。

<form id="b" method="post" target="_blank" action="https://○○○○/reservationtop.asp">
<select name="b_cd" onchange="document.getElementById('b').submit();">
<option value="12">1</option>
<option value="15">2</option>
<option value="21">21</option>
</select>
<input type="submit" value="送信">
</form>

Qlocation.hrefで別窓にリンクを表示させたい

ボタンを作成して、ボタンが押されたらlocation.hrefを利用してリンクに飛ばしているのですが、これを別ウインドウに表示させたいと思っています。別ウィンドウといっても新規に別ウインドウを立ち上げたいのですが、記述方法がわかりません。。。。

ちなみに現在の記述は
<INPUT type="button" value="aaaa" onClick="location.href='hogehoge.html" >

どう修正したらいいのでしょうか?

Aベストアンサー

HEADタグ内に以下を記述
<script language="Javascript">
<!--新しいウィンドウを開く
function newwin(){
var win1=window.open('sample.htm','newwindow',
'toolbar=no,location=no,status=no,menubar=no,scrollbars=no,width=300,height=300');
}
//end--->
</script>

BODYタグ内に以下を記述
<FORM><INPUT type="BUTTON" value="CLICK" onclick="newwin()"></FORM>

参考URL:http://www.wsb.jp/hpb/java_s/window.htm

Qプルダウンメニューからリンクを設定する方法を教えてください。

プルダウンメニューにリンクを設定する方法がわかりません。できればHTMLタグで教えてください。

Aベストアンサー

そのページにロードしたいのであれば、
<SELECT onChange="window.location.href=this.value; return false ;">
<OPTION>
<OPTION VALUE=http://www.goo.ne.jp/>goo
<OPTION VALUE=http://www.google.co.jp/>google
<OPTION VALUE=http://www.yahoo.co.jp/>yahoo
</SELECT>

新しいページを開いてロードしたいのであれば、
<SELECT onChange="window.open(this.value,'_new'); return false ;">
<OPTION>
<OPTION VALUE=http://www.goo.ne.jp/>goo
<OPTION VALUE=http://www.google.co.jp/>google
<OPTION VALUE=http://www.yahoo.co.jp/>yahoo
</SELECT>

そのページにロードしたいのであれば、
<SELECT onChange="window.location.href=this.value; return false ;">
<OPTION>
<OPTION VALUE=http://www.goo.ne.jp/>goo
<OPTION VALUE=http://www.google.co.jp/>google
<OPTION VALUE=http://www.yahoo.co.jp/>yahoo
</SELECT>

新しいページを開いてロードしたいのであれば、
<SELECT onChange="window.open(this.value,'_new'); return false ;">
<OPTION>
<OPTION VALUE=http://www.goo.ne.jp/>goo
<OPTION VALUE=http://www.google.co.jp/>google
<O...続きを読む

Qポップアップブロックにならない別ウインドウの作成法

■やりたいこと
HTMLのリンクをクリックして、小窓を表示し
小窓で入力した値を、HTMLのフォームに挿入し小窓を閉じたい。

小窓は、リンクタグでtarget=_blankやnew Window()などで、
開くのではなく、ポップアップブロックにならない
HTMLのレイヤーを使った具体的なサンプルが載っている
URLはありますでしょうか?

Ajaxを使ったものだとカスマイズが大変そうですが、
やりたいことが満たせれば構いません。よろしくお願いします。

Aベストアンサー

簡単にやるなら、window.prompt()だけでもいけそうな気がするけど、味気ないので、好きなレイアウトが可能なようにしてあります。
(<div id="popup">がポップアップのかわりです)

原理は#1様と同様ですが、個々に生成せずに使いまわしています。
最初に表示値を参照するのと、クリアした状態で表示するのとどちらがよいのか不明でしたので、とりあえず参照して表示するようになっています。
A、B、Cにフォーカスするとポップアップもどきが表示されます。
(表示位置を変えたい場合は、スクリプトでpopupの位置を変えてあげればよろしいかと…)

ご参考まで。
<html>
<head><title>test</title>
<style type="text/css">
#popup {
width:200px;
position:absolute;
top:50px; left:200px;
background-color:#eee;
border:3px ridge #aaf;
z-index:5;
display:none;
}
#popup .title {
padding:3px 6px;
background-color:#bbe;
border-bottom:3px ridge #aaf;
}
#popup .title .button {
float:right;
border:1px solid #aaa;
}
#popup .content {
clear:right;
padding:10px;
}
#popup .button {
cursor:pointer;
font-size:80%;
background-color:#ccd;
}
</style>
<script type="text/javascript">
function pp(n) {
var pop = document.getElementById('popup');
var inp = document.getElementById('inp');
if (typeof(n)!='number') {
inp.value = n.value;
this.obj = n;
pop.style.display = 'block';
inp.focus();
return;
}
if (n == 1) this.obj.value = inp.value;
pop.style.display = 'none';
}
</script>

</head>
<body>
<form>
<p>
A:<input type="text" readonly onfocus="pp(this)">
<p>
B:<input type="text" readonly onfocus="pp(this)">
<p>
C:<input type="text" readonly onfocus="pp(this)">
</form>

<div id="popup">
<div class="title">
<input class="button" type="button" value="x" onclick="pp(3)">
hoge
</div>
<div class="content">
input prompt<br>
<input type="text" value="" id="inp"><br>
<input class="button" type="button" value="OK" onclick="pp(1)">
<input class="button" type="button" value="Cancel" onclick="pp(2)">
</div>
</div>
</body>
</html>

簡単にやるなら、window.prompt()だけでもいけそうな気がするけど、味気ないので、好きなレイアウトが可能なようにしてあります。
(<div id="popup">がポップアップのかわりです)

原理は#1様と同様ですが、個々に生成せずに使いまわしています。
最初に表示値を参照するのと、クリアした状態で表示するのとどちらがよいのか不明でしたので、とりあえず参照して表示するようになっています。
A、B、Cにフォーカスするとポップアップもどきが表示されます。
(表示位置を変えたい場合は、スクリプトでpopup...続きを読む

Qjavascript の 命令文の記述で、ブラウザのポップアップブロックを無効に(解除)するには?

javascriptのスクリプト中に、例えば
window.open()でブラウザの別窓[別ウィンドウ]を開くような部分が有っても、
ブラウザのポップアップブロック設定によって邪魔されて実現しないという場合に、
人間がブラウザ側の設定を変えてブロック解除することは簡単です。
さて
これを、
予めjavascriptのスクリプト中に、ブロック解除のための命令を書いておいて
人手を介さず、
スクリプトが実行されれば確実に(邪魔されず)別窓ポップアップが実現されるように
したいです。
javascriptのコーディングだけでそれは可能でしょうか?
なるべくjqueryとか使わず、javascriptだけでやりだいです。

欲を言えば、自分の作ったスクリプトが動くときだけ、ブロック解除するが
その後は、また、ポップアップブロックされるように
元通りにブラウザの設定を戻して終了するように書ければ
なお良いです。

ご教授のほど
よろしくお願い致します。

Aベストアンサー

不可能なので代案

<a href target=_blank>別タブで開く。開いた window を focus すると更によし</a>

<form action target=_blank>
<input type=hidden name value>
<button type=submit>別タブに色々パラメーター付きで開く</button>
</form>

<button type=button id=xxxxx>疑似ポップアップ内に iframe を表示</button>
<script>
function makePopupListener(url){ return function(ev) {
function R(d,s){if(s) for (var i in s) d[i] = s[i]; return d}
function E(n,s){var e=document.createElement(n); if(typeof s=='string')e.appendChild(document.createTextNode(s)); if(typeof s=='object')R(e,s); return e}
var B = document.body, ST = document.documentElement.scrollTop;
var back = E('div'), pane = E('div');
R(back.style, {position:'absolute', top:'0px', left:'0px', width:'100%', height:'100%', backgroundColor:'black', opacity:'0.5'});
R(pane.style, {position:'absolute', top:'50%', left:'50%', width:'16em', marginLeft:'-8em', height:'10em', marginTop:'-5em', backgroundColor:'white', textAlign:'center', border:'thin solid black', zIndex:'1'});
var cont = pane.appendChild(E('iframe',{src:url}));
R(cont.style, {width:'15em', height:'6em'});
var okey = pane.appendChild(E('p')).appendChild(E('button',{textContent:'OK',type:'button'}));
okey.addEventListener('click',function(ev){window.scrollTo(0,ST); B.removeChild(back), B.removeChild(pane); ev.target.removeEventListener(arguments.callee)},false);
B.appendChild(back), B.appendChild(pane);
okey.focus();
window.scrollTo(0,0);
}}
window.addEventListener('DOMContentLoaded',function(){ document.getElementById('xxxxx').addEventListener('click', makePopupListener('http://www.example.com/'), false)},false);
</script>

素直にライブラリを使う
https://www.google.co.jp/search?q=lightbox
https://www.google.co.jp/search?q=floating+popup

不可能なので代案

<a href target=_blank>別タブで開く。開いた window を focus すると更によし</a>

<form action target=_blank>
<input type=hidden name value>
<button type=submit>別タブに色々パラメーター付きで開く</button>
</form>

<button type=button id=xxxxx>疑似ポップアップ内に iframe を表示</button>
<script>
function makePopupListener(url){ return function(ev) {
function R(d,s){if(s) for (var i in s) d[i] = s[i]; return d}
function E(n,s){var e=document.createElement(n)...続きを読む

QCSSで特定のテーブルだけに適用する記述をおしえてください。

個人でHPをつくっているものなのですが、

外部CSSファイルに

table, td, th {
border: 2px red solid;
}
という記述をすると
すべてのページにあるテーブルに適用されてしまいました。

ある箇所のテーブルなど指定するテーブルのみに記述したい場合はどういったタグにしたらよいのでしょうか?

お詳しい方どうぞよろしくお願いいたします。

Aベストアンサー

特定の箇所のテーブルタグにclass属性を付けてそれを指定します。
<tr> <td>にもつける必要があるでしょう。(何かいい方法があれば別ですが、)

<table class="ta1">
<tr class="ta1">
<td class="ta1">
とし、

table.ta1, td.ta1, th.ta1 {
border: 2px red solid;
}
と指定してみてください。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Qセレクトボックスのselected属性の値について

プログラミング初心者です。

セレクトボックスのselected属性で、<option selected>か、<option selected="selected">で選択済みになりますが、<option selected="???">の???に入る値は「selected」しかないのでしょうか?
例えば、<option selected="false">みたいな感じで、selected属性を書いておいて選択済みにしないということはできないでしょうか。

回答よろしくお願いします。

Aベストアンサー

ありません。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/interact/forms.html#adef-selected
http://www.w3.org/TR/html401/interact/forms.html#adef-selected
「省略可能であり、記述された場合は値はselectedとなる」ということなので
<option>
<option selected>
<option selected="selected">
しかありません。
2番目は、「記述された場合は値はselectedとなる」というところから3番目と同じ意味になる、ということです。

なお、「選択済みにしない」という発想は変です。
<option>はいずれかが選択済みならばほかは選択されていないからです。
「どれも選択されていない状態」(それもそれでHTML的にはよろしくないですが)は、どれにもselectedを付けなければいいのです。

一応、JSから操作する場合は
(その要素).selected = true(false)
で変更できます。

ありません。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/interact/forms.html#adef-selected
http://www.w3.org/TR/html401/interact/forms.html#adef-selected
「省略可能であり、記述された場合は値はselectedとなる」ということなので
<option>
<option selected>
<option selected="selected">
しかありません。
2番目は、「記述された場合は値はselectedとなる」というところから3番目と同じ意味になる、ということです。

なお、「選択済みにしない」という発想は変です。
<option>はいずれかが選...続きを読む


人気Q&Aランキング