HTML DOM คุณสมบัติเป้าหมายของ Anchor

คุณสมบัติเป้าหมาย HTML DOM ที่เชื่อมโยงกับแท็กจุดยึด () ระบุตำแหน่งที่จะเปิดหน้าเว็บใหม่หลังจากคลิก URL สามารถมีค่าดังต่อไปนี้ -

_blank - จะเปิดเอกสารที่เชื่อมโยงในหน้าต่างใหม่
_parent − จะเป็นการเปิดเอกสารที่เชื่อมโยงในพาเรนต์เฟรมเซ็ต
_top − จะเป็นการเปิดเอกสารที่เชื่อมโยงในหน้าต่างตัวเต็ม
_self - จะเปิดเอกสารที่เชื่อมโยงในหน้าต่างเดียวกัน นี่คือพฤติกรรมเริ่มต้น
framename − จะเป็นการเปิดเอกสารที่เชื่อมโยงในชื่อเฟรมที่ระบุ

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ −

ส่งคืนคุณสมบัติเป้าหมาย -

anchorObject.target

การตั้งค่าคุณสมบัติเป้าหมาย -

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

ตัวอย่าง

เรามาดูตัวอย่างคุณสมบัติ anchor 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>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” -

ในตัวอย่างข้างต้น −

เราได้นำสมอแท็กหนึ่งแท็กที่มีแอตทริบิวต์เป้าหมายและมีค่า _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";
}