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

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

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

ไวยากรณ์ (Syntax)

location.origin

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

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

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

ผลลัพธ์

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

หลังคลิกปุ่ม Get origin จะแสดง origin ของ URL (เช่น https://www.example.com:2544)

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

• รูปแบบของ origin คือ protocol://hostname:port
• ถ้าไม่มีการระบุพอร์ต จะใช้พอร์ตมาตรฐานของโปรโตคอล (เช่น 80 สำหรับ HTTP, 443 สำหรับ HTTPS) และจะไม่แสดงพอร์ตในค่าที่คืนมา
• มีประโยชน์สำหรับการตรวจสอบ Same-origin policy และ CORS
• เป็นคุณสมบัติแบบ read-only ไม่สามารถกำหนดค่าได้