JavaScript-ボタンをクリックして、指定されたURLを新しいタブで開く


109

特定のURLにリダイレクトし、新しいタブで開くボタンが欲しいのですが。これはどのように行うことができますか?

回答:


143

これを使って:

<input type="button" value="button name" onclick="window.open('http://www.website.com/page')" />

私のために働きました、そしてそれは新しい完全なブラウザまたはタブではなく実際の新しい「ポップアップ」ウィンドウを開きます。次のように、変数を追加して、特定のブラウザー特性を表示しないようにすることもできます。

onclick="window.open(this.href,'popUpWindow','height=400,width=600,left=10,top=10,,scrollbars=yes,menubar=no'); return false;"

2
@ wong2これに対する答えを変えたいかもしれません。現在選択されているものは、効率的であるとは言い難い。
CSS


29

target = "_ blank"を追加すると、次のようになります。

<a id="myLink" href="www.google.com" target="_blank">google</a>

3
すみません、見逃しました。まあ、あなたはボタンのように見えるようにリンクをスタイルすることができます。jQuery UIを使用している場合は、ボタンを使用してください。
TimBüthe11年

1
Webデザインに手​​を出していない私たちの大多数にとって優れたソリューションです。ありがとうございました!
SMBiggs 2013

1
+1は、ボタンを使用していない場合に、単純な「新しいタブでリンクを開く」という答えを探している人に良い解決策を提供したためです。
user295583058

まさに私が欲しいもの。ありがとう
Shahrukh Anwar

+1、何かが新しいタブでページを開く場合、それは論理的にリンク<a>なので、タグが適切です。スタイルを使用して、ボタンのように見えるようにする必要があります。
コス

21

ブラウザが新しいタブで開くかどうかを制御するため、JavaScriptの使用を忘れることができます。代わりに次のようなことを行うのが最善の方法です。

<form action="http://www.yoursite.com/dosomething" method="get" target="_blank">
    <input name="dynamicParam1" type="text"/>
    <input name="dynamicParam2" type="text" />
    <input type="submit" value="submit" />
</form>

これは、target="_blank"属性が原因でクライアントがどのブラウザーを使用するかに関係なく、常に新しいタブで開きます。

動的パラメーターなしでリダイレクトする必要がある場合は、target="_blank"TimBütheが示唆するように、属性を持つリンクを使用できます。


1
必要に応じて動作します(chrome、firefox、IE10でテスト済み):)
Zeeshan

10

window.open代わりに使用window.locationをて、ブラウザの設定に応じて新しいウィンドウまたはタブを開きます。

button選択する要素がないため、フィドルは機能しません。input[type=button]ボタンidを使ってみてください#buttonId


10

私の優先する方法には、マークアップにJavaScriptが埋め込まれていないという利点があります。

CSS

a {
  color: inherit;
  text-decoration: none;
}

HTML

<a href="http://example.com" target="_blank"><input type="button" value="Link-button"></a>

まあ、私は新しい優先する方法があると思います。
ホルター2017年

これはもっと正確に質問に答えると思います。+1 :)
Pramesh Bajracharya 2017

3

JavaScriptを使用して新しいタブで開く

 <button onclick="window.open('https://www.our-url.com')" id="myButton" 
 class="btn request-callback" >Explore More  </button>

1

私はフォームタグの下でtarget = "_ blank"を使用しただけで、FFとChromeで正常に動作し、新しいタグで開きましたが、IEでは新しいウィンドウで開きました。


1
タブとウィンドウのどちらを開くかは、ユーザーのブラウザーオプションによって決まります。IEについては知りませんが、ほとんどのブラウザーでは、リンクをタブで開くかウィンドウで開くかをWebページで選択できませんが、ユーザーはそれを構成できます。
joeytwiddle 2014


-1

このHTMLを試してください:

<input type="button" value="Button_name" onclick="window.open('LINKADDRESS')"/>

-5

できません。この動作はプラグインでのみ使用可能であり、ユーザーのみが構成できます。


-5
<BUTTON NAME='my_button' VALUE=sequence_no TYPE='SUBMIT' style="background-color:transparent ; border:none; color:blue;" onclick="this.form.target='_blank';return true;"><u>open new page</u></BUTTON>

このボタンはURLのように見え、新しいタブで開くことができます。


「フォーム」を追加する必要があります
nerkn 2014年

ボタンをリンクのように動作させることは(意味的に言えば)良い考えではありません。代わりに、aタグを使用してください。
Henrique Schreiner 2016

-6

このコードを使用

function openBackWindow(url,popName){
        var popupWindow = window.open(url,popName,'scrollbars=1,height=650,width=1050');
          if($.browser.msie){
            popupWindow.blur();
            window.focus();
        }else{
           blurPopunder();
        }
      };

    function blurPopunder() {
            var winBlankPopup = window.open("about:blank");
            if (winBlankPopup) {
                winBlankPopup.focus();
                winBlankPopup.close()
            }
    };

ITは、Mozilla、IE、Chromeで22バージョン未満で正常に動作します。ただし、OperaとSafariでは機能しません。


2
これは最良の答えではありません!固体-1。
牧島翔吾14

1
このコードを使用すると、実際には答えではなく、その背後に動機はありません。
Edeph
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.