HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM アンカーのtargetプロパティとは？使い方と設定値を解説

HTML DOM アンカーのtargetプロパティとは

HTML DOMにおいて、アンカータグ（<a>）に関連付けられたtargetプロパティは、URLをクリックした後にリンク先のWebページをどこに開くかを指定するためのものです。このプロパティには、以下の値を設定できます。

target属性に指定できる値

  • _blank − リンク先のドキュメントを新しいウィンドウ（新しいタブ）で開きます。
  • _parent − リンク先のドキュメントを親フレームセット内で開きます。
  • _top − リンク先のドキュメントをウィンドウ全体（フレームを解除した状態）で開きます。
  • _self − リンク先のドキュメントを同じウィンドウで開きます。これはデフォルトの動作です。
  • framename − リンク先のドキュメントを指定した名前のフレーム内で開きます。

構文

targetプロパティの基本的な構文は以下の通りです。

値を取得する場合：

anchorObject.target

値を設定する場合：

anchorObject.target = "_blank|_self|_parent|_top|framename"

サンプルコード

アンカーのtargetプロパティを実際に操作する例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<p><a id="Anchor" target="_self" href="https://www.examplesite.com">example site</a></p>
<p><a id="Anchor2" href="https://www.examplesite.com">example site</a></p>
<p>ボタンをクリックすると、target属性の値を確認・変更できます。</p>
<button onclick="getTarget1()">GetTarget</button>
<button onclick="setTarget2()">SetTarget</button>
<p id="Target1"></p>
<script>
    function getTarget1() {
        var x = document.getElementById("Anchor").target;
        document.getElementById("Target1").innerHTML = x;
    }
    function setTarget2(){
        document.getElementById("Anchor2").innerHTML = "Target has been set";
        document.getElementById("Anchor2").target = "newframe";
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、次のように表示されます。

HTML DOM アンカーのtargetプロパティとは？使い方と設定値を解説

「GetTarget」ボタンをクリックした後：

HTML DOM アンカーのtargetプロパティとは？使い方と設定値を解説

「SetTarget」ボタンをクリックした後：

HTML DOM アンカーのtargetプロパティとは？使い方と設定値を解説

コードの解説

上記の例では、まずtarget属性に「_self」が設定されたアンカータグと、target属性を指定していない（デフォルトの_selfが適用される）アンカータグの2つを用意しています。

<p><a id="Anchor" target="_self" href="https://www.examplesite.com">example site</a></p>
<p><a id="Anchor2" href="https://www.examplesite.com">example site</a></p>

続いて、getTarget1()関数とsetTarget2()関数をそれぞれ実行するための「GetTarget」「SetTarget」という2つのボタンを作成しています。

<button onclick="getTarget1()">GetTarget</button>
<button onclick="setTarget2()">SetTarget</button>

getTarget1()は、1つ目のリンクからtargetの値を取得し、id="Target1" の段落タグ内に表示します。一方、setTarget2()は、2つ目のリンクの表示テキストを「Target has been set」に変更するとともに、targetの値をデフォルトからカスタムフレーム名「newframe」に設定し直します。

function getTarget1() {
    var x = document.getElementById("Anchor").target;
    document.getElementById("Target1").innerHTML = x;
}
function setTarget2(){
    document.getElementById("Anchor2").innerHTML = "Target has been set";
    document.getElementById("Anchor2").target = "newframe";
}

このように、targetプロパティを使えば、JavaScriptからリンクの開き方を動的に取得・変更することができます。セキュリティの観点から、_blankを指定して外部リンクを開く場合は、rel="noopener noreferrer"を併せて設定しておくことをおすすめします。

  1. HTML DOM designModeプロパティの使い方を徹底解説

    HTML DOMのdesignModeプロパティを使用すると、ドキュメント全体が編集可能かどうかを指定できます。このプロパティを活用することで、HTMLドキュメントはWYSIWYG（What You See Is What You Get：見たままが得られる）エディターのように動作し、ブラウザ上で直接HTMLドキュメントを編集できるようになります。designModeプロパティのデフォルト値は「off」に設定されており、これを「on」に変更することで、ドキュメントの編集が可能になります。構文designModeプロパティを設定する際の構文は以下の通りです。document.designMode

  2. HTML DOMアンカーのhostnameプロパティの使い方を解説

    HTML DOMのAnchor hostnameプロパティは、リンク先URLのうちホスト名（ドメイン名）のみを取得・設定するためのプロパティです。よく似たプロパティである「host」との違いは、ポート番号を含むかどうかという点にあります。host：ホスト名＋ポート番号を返す（例：www.demo.com:6064）hostname：ホスト名のみを返す（例：www.demo.com）hostnameプロパティを設定する構文hostnameプロパティに値を設定する場合は、以下のように記述します。anchorObj.hostname = hostname上記の「hostname」には、設定したいUR