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

คุณสมบัติ hostname ของ Location

คุณสมบัติ hostname ของออบเจ็กต์ Location ใช้สำหรับคืนค่าหรือกำหนดค่าโฮสต์เนม (hostname) ของ URL โดยไม่รวมพอร์ต (port)

ไวยากรณ์ (Syntax)

การอ่านค่า hostname

location.hostname

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

location.hostname = hostname

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

ตัวอย่างด้านล่างแสดงการใช้คุณสมบัติ Location hostname เพื่อดึงค่า hostname จาก URL

<!DOCTYPE html>
<html>
<head>
    <title>Location hostname</title>
    <style>
        form { width: 70%; margin: 0 auto; text-align: center; }
        * { padding: 2px; margin: 5px; }
        input[type="button"] { border-radius: 10px; }
    </style>
</head>
<body>
    <form>
        <fieldset>
            <legend>Location-hostname</legend>
            <label for="urlSelect">URL ปัจจุบัน:</label>
            <input type="url" size="27" id="urlSelect" value="https://www.example.com:2544">
            <input type="button" onclick="getHostname()" value="Get Hostname">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
    <script>
        var divDisplay = document.getElementById("divDisplay");
        var urlSelect = document.getElementById("urlSelect");
        function getHostname() {
            divDisplay.textContent = 'Hostname: ' + location.hostname;
        }
    </script>
</body>
</html>

ผลลัพธ์

ก่อนคลิกปุ่ม Get Hostname จะแสดง URL ในช่องป้อนข้อมูล

หลังคลิกปุ่ม Get Hostname จะแสดง hostname เท่านั้น (เช่น www.example.com) โดยไม่รวมพอร์ต

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

• แตกต่างจาก host ที่รวมพอร์ตด้วย (ถ้ามี)
• เมื่อกำหนดค่า location.hostname = "new-host.com" เบราว์เซอร์จะนำทางไปยังโฮสต์ใหม่พร้อมรักษา path, query และ hash เดิมไว้
• มีประโยชน์สำหรับการตรวจสอบโดเมนปัจจุบันหรือสร้างลิงก์แบบ relative