リンク先を新しい窓で開くには?

このQ&Aのポイント
  • javascript初心者です。2回目以降、リンク先が一つのページ上に上書きされてしまいます。リンク先を開くたび新しい窓で開きたいのですがどうしたらよいのでしょうか?
  • target=_blankやwindow.openなどではないかと思いますが設置場所がよくわかりません。
  • また、サンプルソースを見てもjavascriptの部分がいまいち理解できずにいます。だいたいの流れやURLクリエの部分(HTMLの部分)はなんとなく理解できるのですが文字コードなど表示方法などのところがよくわかりません;;わかりやすくコメントを書いていただけると助かります!
回答を見る
  • ベストアンサー

リンク先を新しい窓で開くには?

javascript初心者です。 2回目以降、リンク先が一つのページ上に上書きされてしまいます。 リンク先を開くたび新しい窓で開きたいのですがどうしたらよいのでしょうか? target=_blankやwindow.openなどではないかと思いますが設置場所がよくわかりません。。 また、サンプルソースを見てもjavascriptの部分がいまいち理解できずにいます。 だいたいの流れやURLクリエの部分(HTMLの部分)はなんとなく理解できるのですが文字コードなど表示方法などのところがよくわかりません;; わかりやすくコメントを書いていただけると助かります! ソースはこちらです↓ ------------------------------------------------------------------------------ <body> <noscript>JavaScriptが無効です</noscript> <form name="fm" action="void" onSubmit="return false;"> <table style="background-color: #e0e0e0"><tr><td> <input Type="text" name="k" size="60" maxlength="255" value="" onKeyPress="if(event.keyCode == 13) { search('google'); }"> <input Type="reset" value="Reset"> </td></tr><tr><td> <input Type="submit" value="Google" onClick="search('google');"> <input Type="submit" value="Yahoo!" onClick="search('yahoo');"> </td></tr></table> </form> <!-- Google --> <form name="f_google" method="GET" action="http://www.google.com/search" Accept-charset="Shift_JIS"> <input type="hidden" name="q" value=""><input type="hidden" name="ie" value="Shift_JIS"> <input type="hidden" name="oe" value="Shift_JIS"><input type="hidden" name="hl" value="ja"> <input type="hidden" name="lr" value="lang_ja"><input type="hidden" name="num" value="20"> </form> <!-- Yahoo! --> <form name="f_yahoo" method="GET" action="http://search.yahoo.co.jp/search" Accept-charset="Shift_JIS"> <input type="hidden" name="ei" value="SJIS"> <input type="hidden" name="fr" value="sfp"> <input type="hidden" name="p" value=""> </form> <script LANGUAGE="JavaScript" Type="text/javascript"> <!-- function setutf(fx){ bkup=document.charset; document.charset="utf-8"; display(fx); document.charset=bkup; } function seteuc(fx){ bkup=document.charset; document.charset="euc-jp"; display(fx); document.charset=bkup; } function setsjis(fx){ bkup=document.charset; document.charset="shift_jis"; display(fx); document.charset=bkup; } function display(formx) { swin=window.open("","category_root",""); formx.target="category_root"; formx.submit(); swin.focus(); } function sitetop(ur) { swin=window.open(ur,"category_root",""); swin.focus(); } function search(eng) { q=document.fm.k.value; if(eng=="google") { if(q=="") sitetop("http://www.google.co.jp/"); else { fw=document.f_google; fw.q.value=q; setsjis(fw); }} if(eng=="yahoo") if(q=="") sitetop("http://www.yahoo.co.jp/"); else { { fw=document.f_yahoo; fw.p.value=q; setsjis(fw); }} } //--> </script> </body>

質問者が選んだベストアンサー

  • ベストアンサー
  • Ogre7077
  • ベストアンサー率65% (170/258)
回答No.1

開くたびに新しい窓/タブで開く方法は幾つかあります。 ただし窓なのかタブなのかは環境によって変わるのでご注意ください。 * window.open の第二引数に '_blank' を指定 * 要素 <form> の属性 target に '_blank' を指定して、改行キー or ボタン押下 or submit() * 要素 <a> の属性 target に '_blank' を指定して、クリック or click() それにしても、ご提示のサンプルソースがあまり良い教材ではありません。 えらく古いし冗長だし命名も変だし文字コードもUTF8で十分だし... 昔のブラウザを考慮しなければいけない特殊な事情があるなら別ですが、 今ならもっと簡単にすっきり書けます。 <form name=fm> <input type=text name=k size=60> <button type=reset>Reset</button> <br> <button type=submit name=ggl>Google</button> <button type=submit name=yho>Yahoo! Japan</button> </form> <div style="display:none"><!-- 見せたくないから見せない --> <form name=subggl method=get target=_blank action="http://www.google.co.jp/search"> <input type=text name=q><a href="http://www.google.co.jp/" target=_blank>top</a></form> <form name=subyho method=get target=_blank action="http://search.yahoo.co.jp/search"> <input type=text name=p><a href="http://www.yahoo.co.jp/" target=_blank>top</a></form> </div> <script> addEventListener('load', function(){ var _=0; // 読みやすくするオマジナイ _ ; function searchOnNewTab(name, v) { _ , _ ; var form = document.forms['sub' + name]; _ , _ ; if (v === '') { _ , _ , _ ; form.getElementsByTagName('A')[0].click() _ , _ ; } else { _ , _ , _ ; form.getElementsByTagName('INPUT')[0].value = v; _ , _ , _ ; form.submit(); _ , _ ; } _ ; } _ ; document.forms['fm'].addEventListener('click', function(ev){ _ , _ ; if (ev.target.type != 'submit') return; // 目的のボタン以外は処理しない _ , _ ; ev.preventDefault(); _ , _ ; var form = ev.currentTarget; _ , _ ; var name = ev.target.name; _ , _ ; var valu = form.elements['k'].value; _ , _ ; searchOnNewTab(name, valu); _ ; }, false); }, false) </script> ご参考まで

namakemononono
質問者

お礼

回答ありがとうございます! サンプルが古いので助かりました。こんなにすっきりなるんですね!! 窓かタブかはブラウザで変わりますね・・・ すべてタブで開きたいのですが無理なんですかね? あとなぜかsafariだけフォーム未入力時の処理が動作しなかったです><

namakemononono
質問者

補足

お礼と補足が逆でしたね^^; getElementsByTagNameはsafariでバグがあるそうです ClassNameにするかボタンにすることで解決できました! 窓かタブかはブラウザの設定でどうにかなりました! 回答ありがとうございまいた!!!

関連するQ&A

  • javascriptを教えてください。

    チェックボックスを付けて、チェックを入れると全て新窓で開く(二枚窓目以降も全て新窓で開く)、チェックを入れない場合は全て同じ窓に上書き表示させるようにしたいです。(デフォルトはチェックが入っている状態にしたい) ※私はjavascriptの書き方は全くわかりません。後で記述パターンを見て機能を追加したりする予定です。 よろしくお願いします。 <form name="fm" action="void" onSubmit="return false;"> <table style="background-color: #e0e0e0"><tr><td> <input Type="text" name="k" size="60" maxlength="255" value="" onKeyPress="if(event.keyCode == 13) { search('google'); }"> <input Type="reset" value="Reset"> </td></tr><tr><td> <input Type="submit" value="Google" onClick="search('google');"> </td></tr></table> </form> <!-- ****Google --> <form name="f_google" method="GET" action="http://www.google.com/search" Accept-charset="Shift_JIS"> <input type="hidden" name="q" value=""><input type="hidden" name="ie" value="Shift_JIS"> <input type="hidden" name="oe" value="Shift_JIS"><input type="hidden" name="hl" value="ja"> <input type="hidden" name="lr" value="lang_ja"><input type="hidden" name="num" value="20"> </form> <script LANGUAGE="JavaScript" Type="text/javascript"> <!-- function seteuc(fx){ bkup=document.charset; document.charset="euc-jp"; display(fx); document.charset=bkup; } function setsjis(fx){ bkup=document.charset; document.charset="shift_jis"; display(fx); document.charset=bkup; } function display(formx) { swin=window.open("","category_root",""); formx.target="category_root"; formx.submit(); swin.focus(); } function sitetop(ur) { swin=window.open(ur,"category_root",""); swin.focus(); } function search(eng) { q=document.fm.k.value; if(eng=="google") { if(q=="") sitetop("http://www.google.co.jp/"); else { fw=document.f_google; fw.q.value=q; setsjis(fw); }} } //--> </script>

  • javascriptに詳しい方、教えてください。

    表示すると表示した瞬間に、文字サイズが大ぐらいから中ぐらいに勝手に変わったり、ボタンの所にカーソルを持っていくと文字サイズが変化したり、バーに文字を入力すると、バーの位置が変わったりするのですが、どうなっているのでしょうか? javascriptは全くわからないので、 どこをどう変えればいいのか、わかりやすい回答をお願いします。 (質問投稿の際に​が勝手に挿入されたりしますので​が入ってた場合は注意をお願いします。) <form name="fm" action="void" onSubmit="return false;"> <table style="background-color: #e0e0e0"><tr><td> <input Type="text" name="k" size="60" maxlength="255" value="" onKeyPress="if(event.keyCode == 13) { search('google'); }"> <input Type="reset" value="Reset"> </td></tr><tr><td> <INPUT type="checkbox" id="chk_blank" checked> <input Type="submit" value="Google" onClick="search('google');"> <input Type="submit" value="Yahoo" onClick="search('yahoo');"> </td></tr></table> </form> <!-- ****Google --> <form name="f_google" method="GET" action="http://www.google.com/search" Accept-charset="Shift_JIS"> <input type="hidden" name="q" value=""><input type="hidden" name="ie" value="Shift_JIS"> <input type="hidden" name="oe" value="Shift_JIS"><input type="hidden" name="hl" value="ja"> <input type="hidden" name="lr" value="lang_ja"><input type="hidden" name="num" value="20"> </form> <!-- ****Yahoo! --> <form name="f_yahoo" method="GET" action="" Accept-charset="euc-jp"> <input type="hidden" name="p" value=""> <input type="hidden" name="ei" value="euc-jp"> </form> <script LANGUAGE="JavaScript" Type="text/javascript"> <!-- function seteuc(fx){ bkup=document.charset; document.charset="euc-jp"; display(fx); document.charset=bkup; } function setsjis(fx){ bkup=document.charset; document.charset="shift_jis"; display(fx); document.charset=bkup; } function display(formx) { formx.target = getTarget(); formx.submit(); } function sitetop(ur) { swin=window.open(ur,getTarget(),""); swin.focus(); } function search(eng) { q=document.fm.k.value; if(eng=="google") { if(q=="") sitetop("http://www.google.co.jp/"); else { fw=document.f_google; fw.q.value=q; setsjis(fw); }} if(eng=="yahoo") { if(q=="") sitetop("http://www.yahoo.co.jp/"); else { fw=document.f_yahoo; fw.p.value=q; fw.action="http://search.yahoo.co.jp/search"; seteuc(fw); }} } function getTarget(){ blankFlg = document.fm.chk_blank.checked; target = ""; if( blankFlg == true ){ // 別窓で開く target = "_blank"; } else{ // 同じ窓で開く target = "_top"; } return target; } //--> </script>

  • ボタンの文字サイズ+入力バーの位置が勝手に変わる

    下記のjavascriptを表示した際に、文字サイズが大ぐらいから中ぐらいに勝手に変わったり、ボタンの所にカーソルを持っていくと文字サイズが変化したり、バーに文字を入力すると、バーの位置が変わったりするのですが、どうなっているのでしょうか? 動かないようにしたいです。 javascriptは全くわからないので、 どこをどう変えればいいのか、わかりやすい回答をお願いします。 <form name="fm" action="void" onSubmit="return false;"> <table style="background-color: #e0e0e0"><tr><td> <input Type="text" name="k" size="60" maxlength="255" value="" onKeyPress="if(event.keyCode == 13) { search('google'); }"> <input Type="reset" value="Reset"> </td></tr><tr><td> <INPUT type="checkbox" id="chk_blank" checked> <input Type="submit" value="Google" onClick="search('google');"> <input Type="submit" value="Yahoo" onClick="search('yahoo');"> </td></tr></table> </form> <!-- ****Google --> <form name="f_google" method="GET" action="http://www.google.com/search" Accept-charset="Shift_JIS"> <input type="hidden" name="q" value=""><input type="hidden" name="ie" value="Shift_JIS"> <input type="hidden" name="oe" value="Shift_JIS"><input type="hidden" name="hl" value="ja"> <input type="hidden" name="lr" value="lang_ja"><input type="hidden" name="num" value="20"> </form> <!-- ****Yahoo! --> <form name="f_yahoo" method="GET" action="" Accept-charset="euc-jp"> <input type="hidden" name="p" value=""> <input type="hidden" name="ei" value="euc-jp"> </form> <script LANGUAGE="JavaScript" Type="text/javascript"> <!-- function seteuc(fx){ bkup=document.charset; document.charset="euc-jp"; display(fx); document.charset=bkup; } function setsjis(fx){ bkup=document.charset; document.charset="shift_jis"; display(fx); document.charset=bkup; } function display(formx) { formx.target = getTarget(); formx.submit(); } function sitetop(ur) { swin=window.open(ur,getTarget(),""); swin.focus(); } function search(eng) { q=document.fm.k.value; if(eng=="google") { if(q=="") sitetop("http://www.google.co.jp/"); else { fw=document.f_google; fw.q.value=q; setsjis(fw); }} if(eng=="yahoo") { if(q=="") sitetop("http://www.yahoo.co.jp/"); else { fw=document.f_yahoo; fw.p.value=q; fw.action="http://search.yahoo.co.jp/search"; seteuc(fw); }} } function getTarget(){ blankFlg = document.fm.chk_blank.checked; target = ""; if( blankFlg == true ){ // 別窓で開く target = "_blank"; } else{ // 同じ窓で開く target = "_top"; } return target; } //--> </script>

  • サイト内検索について

    <form action="http://www.google.com/search"> <input type="hidden" value="hogehoge.jp" name="as_sitesearch" /> <input type="hidden" name="ie" value="Shift_JIS" /> <input type="hidden" name="oe" value="Shift_JIS" /> <input type="text" name="q" size="31" maxlength="256" value="" /> <input type="submit" name="btnG" value="Search!" /> </form> にて、グーグルの検索を使用してサイト内検索を使おうと思っておりますが、グーグルのアイコンは付けなくても宜しいでしょうか? もし、詳しい方お返事お待ちしております。 以上宜しくお願い致します。

    • ベストアンサー
    • HTML
  • Googleサイト内検索窓設置について

    サイト内に設置する検索窓について過去の教えて!!gooを検索し、 非常に有用な記述があり下記のように記載してみたですが、 検索をしたときに表示されるページが沢山ありすぎるので「上位2位までの結果表示」にしたいのですが・・・どなたか記述方法などお分かりになる方いらしたらお教えいただけませんか? 現在下記のように記述したところうまく動いたのですが、いかんせん検索に表示される結果が多すぎて使いすらいのです(><)。 <FORM method="GET" action="http://www.google.co.jp/search"> <INPUT style="border: 1px solid rgb(126, 157, 185); padding: 2px;" name="q" size="40" type="text"> <INPUT type="submit" name="btnG" value="Google 検索"> <INPUT type="hidden" name="hl" value="ja"> <INPUT type="hidden" name="sitesearch" value="www.XXXXXXXXX.jp"> <INPUT type="hidden" name="ie" value="Shift_JIS"> <INPUT type="hidden" name="oe" value="Shift_JIS"> <INPUT type="hidden" name="domains" value="www.XXXXXXXXX.jp"> </FORM>

    • ベストアンサー
    • CSS
  • ランダムリンクでリンク先を別ウィンドウに表示したい

    <form action="http://mkt.fem.jp/randomlink.cgi" method="get"> <input type="hidden" name="mode" value="link"> <input type="hidden" name="x" value="http://www.yahoo.co.jp/"> <input type="hidden" name="x" value="http://www.odn.ne.jp/"> <input type="hidden" name="x" value="http://www.bbiq.jp/"> <input type="hidden" name="x" value="http://www.ntt-west.co.jp/"> <input type="hidden" name="x" value="http://www.nttdocomo.co.jp/"> <input type="submit" value="タイトル~ランダムリンクだよ"></form> わかりやすい様にリンク先URLに差し支えのないものを入れました。 <input type="hidden" name="x" value="リンク先URL"> これを追加するだけでランダムリンク先は増えていきます。 質問ですが、これを表示させればリンク先は別ウィンドウにはなりません。今回は、リンク先を別ウィンドウに表示したいのです。 HTMLのどこを変えればいいのか、貼っていただけないでしょうか?

  • 一つの検索窓で複数のサイトから一度に検索させる方法

    自分のホームページにサイト内検索の検索窓を設置しようと考えています。 私は知識に乏しいので、ネット上に紹介されているものをそのまま使おうと思い、以下を貼り付けることにしました。 <form action="http://www.google.com/search"> <input type="hidden" name="hl" value="ja"> <input type="hidden" name="hq" value="inurl:****.com/"> <input type="hidden" name="ie" value="Shift_JIS"> <input type="hidden" name="oe" value="Shift_JIS"> <input type="hidden" name="filter" value="0"> <input type="text" name="q" size="40" maxlength="256" value=""> <input type="submit" name="btnG" value="検索"> </form> しかし、私は、複数のレンタルサーバーを使用して一つのホームページのように見せているので、複数のURLからの検索が必要なのです。 一つの検索窓で複数のサイトから一度に検索させるようにするにはどのように書きかえればよろしいでしょうか? よろしくお願いいたします。

  • スマートフォンからMySQLサーバーにインサート

    「HTML+javascript」のスマートフォンアプリから別サーバーのMySQLと連携させることを考えています。 サーバーの情報を取得することは問題なくできたのですが、サーバーにインサートする方法で悩んでいます。 【post.html】では、mysqlにインサートはされるものの、端末にはサーバーのinsert.phpがそのまま表示されてしまいます。 【post_kai.html】でfunction Check()を試したところ、送信ボタンを押した後に端末内のfinish.htmlが表示されましたが、残念ながらインサートが出来ていませんでした。 サーバーにインサートを完了させながら、その後は端末内のfinish.htmlを表示させるためにはどうすればいいでしょうか? ****************************** 端末側 ****************************** 【post.html】 <form name="form1" id="form1" method="POST" name="form1" value="form1" action="http://hoge.ne.jp/insert.php"> <input type="hidden" name="id" value="100" /> <input type="hidden" name="pw" value="12zdD3fw" /> <input type="button" name="button" value="送信" /> <input type="hidden" name="MM_insert" value="form1" /> </form> 【post_kai.html】 <form name="form1" id="form1" method="POST" name="form1" value="form1" action="http://hoge.ne.jp/insert.php"> <input type="hidden" name="id" value="100" /> <input type="hidden" name="pw" value="12zdD3fw" /> <script> function Check(){ document.form1.submit(); location.href="finish.html"; } </script> <input type="button" name="button" value="送信" onClick="Check();" /> <input type="hidden" name="MM_insert" value="form1" /> </form> 【finish.html】 <html> OKです <html> ****************************** サーバー側(mysql側) http://hoge.ne.jp/ ****************************** 【insert.php】 省略

  • 自作の検索エンジンを作りたいんですが

    <form action="http://www.amazon.co.jp/exec/obidos/external-search" target="_blank"> <input type=text name="keyword" size=31 maxlength=255 value=""> <input type="hidden" name="encoding-string-jp" value="日本語" /> <input type="hidden" name="mode" value="blended" /> <input type="hidden" name="tag" value="jojoagogo09-22" /> <form> と <form action="http://www.google.co.jp/search"> <input type=text name=q size=31 maxlength=255 value=""> <input type=hidden name=ie value=UTF-8> <input type=hidden name=oe value=UTF-8> <input type=hidden name=hl value="ja"> をくっつけて、1つのtextボックスからどっちで検索するかラジオボタンで選択してから検索ボタンで検索できるようにしたいです。 やり方だけでも構いませんが、もしよろしければサンプルや実際にくっつけたタグを回答していただけると凄く助かります。 どうかお願いします。

  • リンク先のcgiが開かない

    お世話になります。 既存のcgiを改造しているのですが、リンク先のcgiが開かず、何のエラーもなく、元のページが再表示されてしまっています。何が原因なのでしょうか? ソース自体は改造前と見比べてみても(パラメータを追加した以外)なんら変わりはありません。 <FORM METHOD=POST ACTION="t02.cgi"> <INPUT TYPE=HIDDEN NAME=A VALUE="123"> <INPUT TYPE=HIDDEN NAME=MODE VALUE="111"> <INPUT TYPE=HIDDEN NAME=BU VALUE="DD"> <TD COLSPAN=6>&nbsp;&nbsp;<INPUT TYPE=SUBMIT VALUE="ダウンロード"></TD> </FORM> 上記のようなテキストをperlで組み立ててスキンにはめ込んで作っています。 よろしくお願いします。

    • 締切済み
    • CGI

専門家に質問してみよう