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

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

คุณสมบัติ pathname ของออบเจ็กต์ Location ใช้สำหรับคืนค่าหรือกำหนดค่าสตริงที่ตรงกับส่วน path (เส้นทาง) ของ URL

ไวยากรณ์ (Syntax)

การอ่านค่า pathname

location.pathname

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

location.pathname = pathOfHost

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Location pathname</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-pathname</legend>
            <label for="urlSelect">URL ปัจจุบัน:</label>
            <input type="url" size="30" id="urlSelect" value="https://www.example.com:2544/aboutUs/CTO.htm">
            <input type="button" onclick="getpathname()" value="Get pathname">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
    <script>
        var divDisplay = document.getElementById("divDisplay");
        var urlSelect = document.getElementById("urlSelect");
        function getpathname() {
            divDisplay.textContent = 'URL pathname: ' + location.pathname;
        }
    </script>
</body>
</html>

ผลลัพธ์

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

หลังคลิกปุ่ม Get pathname จะแสดงเฉพาะส่วน path ของ URL (เช่น /aboutUs/CTO.htm)

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

• คุณสมบัติ pathname จะคืนค่าส่วนเส้นทางของ URL เริ่มต้นด้วยเครื่องหมาย / เสมอ
• ไม่รวม protocol, hostname, port, query string หรือ hash fragment
• สามารถใช้ตั้งค่า path ใหม่ได้ ซึ่งจะทำให้เบราว์เซอร์นำทางไปยัง URL ใหม่โดยอัตโนมัติ