リンクを作る&あなたが望む場所にそれらを開くために使用する方法!

_blank

のみを使用します。targetの現在関連する値は_blankのみです。 他のtargetの値は、特定のフレームを指定するために使用されました。 しかし、html5ではフレームは非推奨になっています。

Default target

targetが指定されていない場合、ユーザーまたはブラウザが特に指定しない限り、リンクは現在のコンテキストで開きます。

a target=”_blank”新しいブラウザタブ(またはウィンドウ)で開く

target属性は、リンクがクリックされたときにリンクされた文書を開く場所を指定します。 デフォルトは現在のウィンドウです。 target="_blank"の場合、リンクされた文書は新しいタブまたは(古いブラウザでは)新しいウィンドウで開きます。

なぜ新しいブラウザで開くのですか?

`target=”_blank”を使用する最も一般的な理由は、オフサイトのリンクを別のタブで開くためです。 これにより、ユーザーは参照をクリックして、現在のページを離れることなく、後で参照に戻ることができます。 それはあなたの場所の訪問者をより長く保ち、あなたの測定基準のほとんどを改善する:直帰率、転換、訪問されたページ。

JavaScriptですべての外部リンクを新しいタブで開く

サイト上のすべてのリンクに手動でtarget="_blank"を追加する必要はありません。 たくさんリンクしている場合(これを行う必要があります)、JavaScriptコードをサイトに追加し、すべての外部リンクを_blankリンクに自動的に変換するのは簡単で


jQuery(document.links) .filter(function() { return this.hostname != window.location.hostname; }) .attr('target', '_blank');

(このウェブサイトのすべてのページで、このコードのわずかに変更された形式が動作しているのを見ることができます。)このトリックはjQueryを必要としますが、すでに使用している可能性があります。 WordPress、Drupal、Twitter Bootstrapなど、最も人気のあるフレームワークやコンテンツ管理システムで使用されています。 あなたがjQueryなしでそれをする必要があるならば、それも同様にすることができます。 ここに”普通のJavaScript”バージョンがあります:

function externalLinks() { for(var c = document.getElementsByTagName("a"), a = 0;a < c.length;a++) { var b = c; b.getAttribute("href") && b.hostname !== location.hostname && (b.target = "_blank") } } ; externalLinks(); 

それを容易にすることのほかに、これはあなたのmarkupをかなりきれいにする。

`target=”_blank”を使用しない理由

ユーザーは新しいブラウジングコンテキストでリンクを開くことを好まないと主張する人もいます。 彼らはそうすることはポップアップ広告や他の迷惑な行動に似ていると思います。 タブブラウジングの台頭に伴い、この引数は、主に離れて行っています。 ほとんどのユーザーは、現在の閲覧コンテキストを失うことなく、後で読むために参照されたリンクをキューに入れることができるため、新しいタブでリンクを開くことを好みます。

ターゲット属性の値

値名 メモ
_blank リンクされたドキュメントを新しいタブまたはウィンドウで開きます。
_parent は、親フレーム内のリンクを開きます。 フレームはHTML5では非推奨です。
_self 現在のフレームでリンクを開きます。
_top リンクを一番上のフレームで開きます。 フレームはHTML5では非推奨です。
フレーム名 は、指定されたフレーム内のリンクを開きます。 フレームはHTML5では非推奨です。

anchor要素のすべての属性

属性名 メモ
フレフラング リンクされたリソースの言語を指定します。
ダウンロード リンクされたリソースを開くのではなく、ダウンロードするようにブラウザに指示します。
target _blank
_parent
_self
_top
frame name
リンクされたリソースを開くコンテキストを指定します。
title text はリンクのタイトルを定義し、ユーザーにはツールチップとして表示されます。
href url は、リンクされたドキュメント、リソース、または場所を指定します。
名前
Adamは、開発者のドキュメントとチュートリアルを専門とするテクニカルライターです。

コメントを残す

メールアドレスが公開されることはありません。

More: