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

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

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

ไวยากรณ์ (Syntax)

การอ่านค่า host

location.host

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

location.host = hostname:port

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

ตัวอย่างด้านล่างแสดงการใช้คุณสมบัติ Location host เพื่อดึงค่า host และตรวจสอบว่ามีพอร์ตหรือไม่

<!DOCTYPE html>
<html>
<head>
    <title>Location host</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-host</legend>
            <label for="urlSelect">URL ปัจจุบัน:</label>
            <input type="url" size="27" id="urlSelect" value="https://www.example.com:2544">
            <input type="button" onclick="getHostPort()" value="Get Port">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
    <script>
        var divDisplay = document.getElementById("divDisplay");
        var urlSelect = document.getElementById("urlSelect");
        function getHostPort() {
            if (location.host.includes(':') === false) {
                divDisplay.textContent = 'No port present, as host: ' + location.host;
            } else {
                divDisplay.textContent = 'Port: ' + location.host.split(":")[1] + ', as host: ' + location.host;
            }
        }
    </script>
</body>
</html>

ผลลัพธ์

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

หลังคลิกปุ่ม Get Port จะแสดง host และพอร์ต (เช่น Port: 2544, as host: www.example.com:2544)

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

• รูปแบบค่าที่คืนคือ hostname:port (ถ้ามีพอร์ต) หรือแค่ hostname (ถ้าไม่มีพอร์ต)
• แตกต่างจาก hostname ที่ไม่รวมพอร์ตเลย
• เมื่อกำหนดค่า location.host = "newhost.com:8080" เบราว์เซอร์จะนำทางไปยังโฮสต์และพอร์ตใหม่
• ตัวอย่างโค้ดใช้ includes(':') และ split(":") เพื่อแยกพอร์ตออกจาก host