HTMLの新しいタブでリンクを開く方法は?


390

私はHTMLプロジェクトに取り組んでおり、JavaScriptなしで新しいタブでリンクを開く方法を見つけることができません。

<a href="http://www.WEBSITE_NAME.com"></a>同じタブでリンクを開くことはすでに知っています。それを新しいもので開く方法はありますか?


40
使用<a href="url" target="_blank">...</a>
Rohit Agrawal

1
Rohitが言うように、param target = "_ blank"を追加しますが、FireFoxでは、少なくとも2つのアンダースコアtarget = "__ blank"を実行すると、新しいタブで開きますが、同じダブルアンダースコアを使用して他のリンクをクリックすると、新しい以前の新しいタブのページ。つまり、開いているタブが1つだけあります。
Justin Levene

回答:


599

リンクの 'target'属性を次のように設定します_blank

<a href="#" target="_blank" rel="noopener noreferrer">Link</a>

編集:他の例については、こちらを参照してください:http : //www.w3schools.com/tags/att_a_target.asp

(注:blank代わりに以前に提案_blankしました。使用すると、新しいタブが開き、リンクが再度クリックされたときに同じタブが使用されます。ただし、これは、GolezTrolが指摘したように、フレーム/ウィンドウのa。リンクが再度押されて同じタブで開くときに設定および使用されます)。

セキュリティの考慮!

これrel="noopener noreferrer"は、新しく開いたタブが元のタブを悪意を持って変更できないようにするためです。この脆弱性の詳細については、次のリソースを参照してください。


16
特別なターゲットはすべてアンダースコアで始まります。blankフレームまたはウィンドウの名前になります。「空白」という名前のウィンドウがない場合は新しいウィンドウまたはタブが開かれる可能性がありますが、リンクをもう一度クリックすると、別のタブまたはタブが開かれるのではなく、同じタブでページが再度開かれるはずです。
GolezTrol 2013

2
まあ、それは無効ではないでしょう、それはただ違うだけです。代わりにblankを使用することもできますがfoo_blank実際には特別な意味があります。そうでないことを証明する情報が見つかりません。あなたはできる?
GolezTrol 2013

2
@Stefanいいえ、_blank大丈夫です。リンクはそれぞれ別のタブで開きます。下線なしで名前を指定した場合(例:)、blankリンクは同じタブで開きます。
SharkofMirkwood 2015

6
ヒント:_blankによる脆弱性に注意してください。詳細情報のmedium.com/@jitbit/...
Aistis

1
mathiasbynens.github.io/rel-noopenerという脆弱性を含む別のページで、それ自体が例です。
PhoneixS 2018年

99

要件に応じて、これらのいずれかを使用してください。

リンクされたドキュメントを新しいウィンドウまたはタブで開きます。

 <a href="xyz.html" target="_blank"> Link </a>

リンクされたドキュメントを、クリックされたときと同じフレームで開きます(これがデフォルトです)。

 <a href="xyz.html" target="_self"> Link </a>

リンクされたドキュメントを親フレームで開きます。

 <a href="xyz.html" target="_parent"> Link </a>

リンクされたドキュメントをウィンドウ全体で開きます。

 <a href="xyz.html" target="_top"> Link </a>

リンクされたドキュメントを名前付きフレームで開きます。

 <a href="xyz.html" target="framename"> Link </a>

MDNを参照


情報のおかげで。クリックしたときにリンクを新しいタブで開く方法は?
Shajeel Afzal 2017

上記で共有したように、htmlのコードを使用します。ほとんどの新しいブラウザーは、target = "_ blank"を使用すると、デフォルトでリンクを新しいタブで開きます
Learner Always

1
target="_blank"脆弱性があることを念頭に置いて、mathiasbynens.github.io / rel
noopenerで

36

すべてのリンクの後にコマンドを実行する代わりに、サイト全体に対して一度コマンドを実行したい場合。あなたのウェブサイトのヘッドとビンゴの中でこの場所を試してください。

<head>
<title>your text</title>
<base target="_blank" rel="noopener noreferrer">
</head>

お役に立てれば


3
rel = "noopener noreferrer"を追加することを忘れないでください
Blundering Philosopher


6

いつ使用するかtarget='_blank'

HTMLバージョン(一部のデバイスではサポートされていません):

<a href="http://chriscoyier.net" target="_blank">This link will open in new window/tab</a>

すべてのデバイスのJavaScriptバージョン:

rel = "external"の使用は完全に有効です

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $('a[rel="external"]').attr('target', '_blank');
</script>

そしてjqueryの場合は以下のもので試すことができます:

$("#content a[href^='http://']").attr("target","_blank");

ブラウザの設定で新しいウィンドウで開くことができない場合:

href = "google.com";
onclick="window.open (this.href, ''); return false";

1
rel = "noopener noreferrer"を追加することを忘れないでください
Blundering Philosopher


2

以下を使用できます。

<a href="http://www.WEBSITE_NAME.com"  target="_blank"> Website</a>

ただし、上記の場合、サイトがフィッシング攻撃に対して脆弱になります。リンクにrel = "noopener noreferrer"を追加することで、一部のブラウザでこの問題が発生しないようにすることができます。これを追加すると、上記の例は次のようになります。

<a href="http://www.WEBSITE_NAME.com" rel="noopener noreferrer" target="_blank">Website.com</a> 

詳細については、https//www.thesitewizard.com/html-tutorial/open-links-in-new-window-or-tab.shtmlをご覧ください。


0

あなたはこのようにすることができます:

<a href="https://duckduckgo.com/" target="_blank" rel="noopener noreferrer">Open Duck</a>

セキュリティとプライバシーの詳細については、MDNの次のURLも参照してください。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Security_and_privacy

次に、Target = "_ blank"という名前の優れた記事へのリンクがあります-これまでで最も過小評価されている脆弱性

https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.