web-dev-qa-db-ja.com

入力ボタンtarget = "_ blank"により、リンクが新しいウィンドウ/タブに読み込まれない

入力ボタン付きのHTMLファイルがあります。これはボタンの例に過ぎませんが、必要なすべてのコード情報が含まれています。

<input type="button" onClick="parent.location='http://www.facebook.com/'" value="facebook" target="_blank">

何らかの理由で、新しいウィンドウ/タブに読み込まれていません。

htmlbuttoninputtarget
9
Teemu Laine

このようにする必要があります...

<a type="button" href="http://www.facebook.com/" value="facebook" target="_blank" class="button"></a>

そして、あなたがそれがbtnのように見えるようにしたい場合、基本的なCSSを追加します..このように

    .button {
    width:100px;
    height:50px;
    -moz-box-shadow:inset 0 1px 0 0 #fff;
    -webkit-box-shadow:inset 0 1px 0 0 #fff;
    box-shadow:inset 0 1px 0 0 #fff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
    background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
    background-color:#fff;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777;
    font-family:Helvetica;
    font-size:15px;
    font-weight:700;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0 #fff
}



  .button:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
    background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
    background-color:#d1d1d1
}
.button:active {
    position:relative;
    top:1px
}

ターゲットはhrefタグでのみ機能します。

10
jycr753

使用する formtarget="_blank"私のために働く

<input type="button" onClick="parent.location='http://www.facebook.com/'" value="facebook" formtarget="_blank">

ブラウザの互換性：from caniuse.com
[〜＃〜] ie [〜＃〜]：10+ | エッジ：12+ | Firefox：4+ | Chrome：15+ | Safari/iOS：5.1+ | Android：4+

39
mans

正解：

<form role="search" method="get" action="" target="_blank"></form>

すべての主要なブラウザでサポートされています:)

7
Davis

同様の問題に直面して、私はこの方法でそれを解決しました：

<a href="http://www.google.com/" target="_top" style="text-decoration:none"><button id="back">Back</button></a>

必要に応じて_ topを_ blankに変更します。

4
Gianluca Greco

targetは、input要素では無効です。

ただし、この場合、リダイレクトはJavascriptによって行われるため、スクリプトで新しいウィンドウを開くことができます。

3
user1864610

Formtarget属性は、type = "submit"のボタンにのみ使用されます。

これは、これから 参照 です。

JavaScriptを使用した答えは次のとおりです。

<input type="button" onClick="openNewTab()" value="facebook">

<script type="text/javascript">
    function openNewTab() {
        window.open("http://www.facebook.com/");
    }
</script>
2
Grizzly

input要素は、target属性をサポートしていません。 target属性はaタグ用であり、使用する場所です。

2
MaVRoSCy

の代わりに

onClick = "parent.location = ' http://www.facebook.com/ '"

使ってみて

onClick = "window.open= ' http://www.facebook.com/ '" onClick = "window。 open（ ' http://www.facebook.com/ '、 'facebook'） "

1
nick

私のために働いているこれを試してください

onClick = "window.open（ ' http://www.facebook.com/ '、 'facebook'）"

<button type="button" class="btn btn-default btn-social" onClick="window.open('http://www.facebook.com/','facebook')">
          <i class="fa fa-facebook" aria-hidden="true"></i>
</button>
1
Saikat Das
<form target="_blank">
    <button class="btn btn-primary" formaction="http://www.google.com">Google</button>
</form>
1
JoshYates1980

Javascript window.open 関数を "_blank"の2番目のパラメーターと共に使用するだけです

<button onClick="javascript:window.open('http://www.facebook.com', '_blank');">facebook</button>
0
Laurent

JQUERYを使用する別のソリューションは、ユーザーがボタンをクリックしたときに呼び出される関数を作成することです。この関数は、新しい<A>要素は、target = 'blank'で、これをドキュメントに追加し、「クリック」してから削除します。

そのため、ユーザーに関する限り、ボタンをクリックしましたが、舞台裏では<A> target = '_ blank'の要素がクリックされました。

<input type="button" id='myButton' value="facebook">

$(document).on('ready', function(){
     $('#myButton').on('click',function(){
         var link = document.createElement("a");
         link.href = 'http://www.facebook.com/';
         link.style = "visibility:hidden";
         link.target = "_blank";
         document.body.appendChild(link);
         link.click();
         document.body.removeChild(link); 
     });
});

JsFiddle： https://jsfiddle.net/ragDaniel/tf991u4g/2/

0
RagD