คุณสมบัติ target ของ Anchor ใน HTML DOM

คุณสมบัติ target ของ Anchor

คุณสมบัติ target ที่เกี่ยวข้องกับแท็ก anchor (<a>) ระบุว่าเว็บเพจใหม่จะเปิดที่ไหนหลังจากคลิก URL ค่าที่เป็นไปได้มีดังนี้:

• _blank - เปิดในหน้าต่าง/แท็บใหม่
• _parent - เปิดใน frameset พาเรนท์
• _top - เปิดในหน้าต่างเต็ม (ทำลาย frames ทั้งหมด)
• _self - เปิดในหน้าต่าง/เฟรมเดิม (ค่าเริ่มต้น)
• framename - เปิดในเฟรมที่ระบุชื่อ

ไวยากรณ์ (Syntax)

การอ่านค่า target

anchorObject.target

การกำหนดค่า target

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

ตัวอย่างการใช้งาน

ตัวอย่างด้านล่างแสดงการอ่านและตั้งค่า target attribute

<!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").target = "_blank";
            document.getElementById("Target1").innerHTML = "Target has been set";
        }
    </script>
</body>
</html>

ผลลัพธ์

เริ่มต้น: ลิงก์แรก target="_self", ลิงก์ที่สอง default (_self)

คลิก GetTarget: แสดง "_self"

คลิก SetTarget: ตั้งค่า target ของลิงก์ที่สองเป็น "_blank" แล้วแจ้ง "Target has been set"

คำอธิบายเพิ่มเติม

• ความปลอดภัย: เมื่อใช้ target="_blank" ควรเพิ่ม rel="noopener noreferrer" เพื่อป้องกัน window.opener attacks
• rel="noopener" - ป้องกันหน้าใหม่เข้าถึง window.opener
• rel="noreferrer" - ไม่ส่ง Referer header ไปหน้าใหม่
• ตัวอย่างที่ปลอดภัย: <a href="..." target="_blank" rel="noopener noreferrer">
• คุณสมบัติ target ทำงานกับ <a>, <area>, <base>, <form>