คุณสมบัติ target
ใน JavaScript สามารถเข้าถึงค่าของแอตทริบิวต์ target ในแท็ก <a> (ลิงก์) ได้ผ่านคุณสมบัติ target ของอ็อบเจกต์ HTMLAnchorElement
ตัวอย่างโค้ด
<!DOCTYPE html>
<html>
<body>
<p>
<a id="qriesid" target="_self" href="https://qries.com/" type="text/html">Qries</a>
</p>
<script>
var link = document.getElementById("qriesid");
var targetValue = link.target;
document.write("Value of the target attribute: " + targetValue);
</script>
</body>
</html>
ค่าที่เป็นไปได้ของ target
| ค่า |
คำอธิบาย |
_self |
เปิดในเฟรม/แท็บปัจจุบัน (ค่าเริ่มต้น) |
_blank |
เปิดในแท็บ/หน้าต่างใหม่ |
_parent |
เปิดในเฟรมพาเรนต์ (ถ้าอยู่ใน iframe) |
_top |
เปิดในหน้าต่างบนสุด (ทำลายเฟรมทั้งหมด) |
framename |
เปิดในเฟรมที่มี name ตรงกัน |
คุณสมบัติสำคัญอื่น ๆ ของลิงก์ (<a>)
| คุณสมบัติ |
คำอธิบาย |
href |
URL ปลายทาง |
target |
ที่เปิดลิงก์ (ดูตารางข้างต้น) |
rel |
ความสัมพันธ์: noopener, noreferrer, nofollow, external |
type |
MIME type ที่แนะนำ |
hreflang |
รหัสภาษาของหน้าปลายทาง |
download |
บังคับดาวน์โหลด (ค่าสตริง = ชื่อไฟล์) |
ping |
URL สำหรับส่ง pingback (รายการคั่นด้วย space) |
referrerPolicy |
นโยบาย Referrer: no-referrer, origin, strict-origin-when-cross-origin, ฯลฯ |
แนวทางปฏิบัติที่ดี (Best Practices)
- เมื่อใช้
target="_blank" ควรเพิ่ม rel="noopener noreferrer" เพื่อความปลอดภัยและประสิทธิภาพ
- หลีกเลี่ยงการใช้ชื่อเฟรมแบบกำหนดเอง (framename) ในเว็บสมัยใหม่
- คุณสมบัติ
target สามารถอ่าน/เขียนได้แบบ real-time ผ่าน JavaScript
ตัวอย่างการเปลี่ยน target แบบไดนามิก
var link = document.getElementById("mylink");
// เปลี่ยนเป็นเปิดแท็บใหม่
link.target = "_blank";
link.rel = "noopener noreferrer";
// ตรวจสอบค่าปัจจุบัน
console.log("Current target:", link.target);
