HTML DOM Anchor target屬性用法及代碼示例

與錨標記 (<a>) 關聯的 HTML DOM 目標屬性指定單擊 URL 後新網頁將打開的位置。它可以具有以下值 -

_blank - 這將在新窗口中打開鏈接的文檔。
_parent - 這將打開父框架集中的鏈接文檔。
_top - 這將在全身窗口中打開鏈接的文檔。
_self - 這將在同一窗口中打開鏈接的文檔。這是默認行為
framename - 這將在指定的框架名中打開鏈接的文檔。

用法

以下是語法 -

返回目標屬性 -

anchorObject.target

設置目標屬性 -

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

示例

讓我們看一個錨目標屬性的例子 -

<!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>Click the button to see the value of the target attribute.</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("Target1").target="newframe";
   }
</script>
</body>
</html>

輸出

這將產生以下輸出 -

點擊 “GetTarget” 按鈕後 -

點擊 “SetTarget” 按鈕後 -

在上麵的例子中 -

我們采用了一個帶有 target 屬性和值 _self 的錨標簽，另一個帶有默認 _blank 的錨標簽 -

<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>

然後我們創建了兩個名為 GetTarget 和 SetTarget 的按鈕來分別執行 getTarget1() 和 setTarget2() 函數。

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

getTarget1() 將從第一個鏈接中獲取目標值並顯示在 id=”Target1” 的段落標記中。 setTarget2() 會將 link2 的目標值從默認 _blank 設置為自定義框架 “newframe”。

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

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM Anchor target Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。