คุณสมบัติ hostname คืออะไร?
คุณสมบัติ hostname ของวัตถุ Anchor (Anchor Object) ใน HTML DOM ใช้สำหรับ อ่านหรือตั้งค่าเฉพาะชื่อโฮสต์ (Domain name) ของ URL ในลิงก์ ไม่รวมพอร์ต (Port) ไม่รวมโปรโตคอล (Protocol) และไม่รวมเส้นทาง (Path)
รูปแบบการใช้งาน (Syntax)
อ่านค่า hostname:
anchorObj.hostname
ตั้งค่า hostname:
anchorObj.hostname = "hostname"
ความแตกต่างระหว่าง host และ hostname
| คุณสมบัติ | ค่าตัวอย่าง | คำอธิบาย |
|---|---|---|
host |
www.example.com:8080 |
โฮสต์ + พอร์ต (ถ้ามี) |
hostname |
www.example.com |
เฉพาะชื่อโฮสต์/โดเมน |
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<body>
<h1>บริษัทของเรา</h1>
<p><a id="myLink" href="https://www.demo.com:6064/abc/def.html#myteam">ทีมงานของเรา</a></p>
<h2 id="display"></h2>
<button onclick="showHash()">แสดง Hash (#)</button>
<button onclick="showHost()">แสดง Host (โฮสต์+พอร์ต)</button>
<button onclick="showHostname()">แสดง Hostname (โดเมน)</button>
<script>
function showHash() {
document.getElementById("display").innerHTML = "Hash: " + document.getElementById("myLink").hash;
}
function showHost() {
document.getElementById("display").innerHTML = "Host: " + document.getElementById("myLink").host;
}
function showHostname() {
document.getElementById("display").innerHTML = "Hostname: " + document.getElementById("myLink").hostname;
}
</script>
</body>
</html>
ผลลัพธ์ที่คาดหวัง
- กด แสดง Hash:
#myteam - กด แสดง Host:
www.demo.com:6064 - กด แสดง Hostname:
www.demo.com
การประยุกต์ใช้งานจริง
- ตรวจสอบโดเมน: ตรวจสอบว่าลิงก์นำไปยังโดเมนที่ไว้ใจได้หรือไม่ ก่อนนำทางผู้ใช้
- Dynamic Link Building: สร้างลิงก์โดยเปลี่ยนแปลง hostname ตามสภาพแวดล้อม (Development, Staging, Production)
- Analytics: บันทึก hostname ของลิงก์ที่ผู้ใช้คลิก เพื่อวิเคราะห์การไหลของトラフィค
หมายเหตุ: การตั้งค่า hostname จะอัปเดต URL ทั้งหมดของลิงก์โดยอัตโนมัติ แต่จะรักษา protocol, port, path, query และ hash เดิมไว้
