คุณสมบัติ Location Protocol ใน JavaScript - ดึงโปรโตคอลของ URL ปัจจุบัน

คุณสมบัติ location.protocol ใช้สำหรับอ่านหรือตั้งค่าโปรโตคอล (Protocol) ของ URL ปัจจุบัน เช่น http:, https:, file: รวมถึงเครื่องหมาย Colon (:) ด้วย

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

ตัวอย่าง: แสดงโปรโตคอลของหน้าปัจจุบัน

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Location Protocol</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
        .result { font-size: 18px; font-weight: 500; color: blueviolet; }
        button { padding: 8px 16px; margin: 10px 0; cursor: pointer; }
        .info { background: #f8f9fa; padding: 15px; border-radius: 4px; margin: 10px 0; }
    </style>
</head>
<body>
    <h1>Location Protocol Property</h1>
    <div class="info">
        URL ปัจจุบัน: <span id="fullUrl"></span>
    </div>
    <div class="result"></div>
    <button class="Btn">ดูโปรโตคอลและข้อมูล Location</button>
    <h3>กดปุ่มด้านบนเพื่อดูโปรโตคอลของ URL ปัจจุบัน</h3>

    <script>
        let resEle = document.querySelector(".result");
        let BtnEle = document.querySelector(".Btn");
        document.getElementById("fullUrl").textContent = location.href;
        
        BtnEle.addEventListener("click", () => {
            resEle.innerHTML = `
                Protocol: ${location.protocol} <br>
                Host: ${location.host} <br>
                Hostname: ${location.hostname} <br>
                Port: ${location.port || "(default)"} <br>
                Pathname: ${location.pathname} <br>
                Search: ${location.search} <br>
                Hash: ${location.hash} <br>
                Origin: ${location.origin} <br>
                Href (Full): ${location.href}
            `;
        });
    </script>
</body>
</html>

ผลลัพธ์

รันบน https://example.com/path?query=1#section:
Protocol: https:
Host: example.com
Origin: https://example.com

การประยุกต์ใช้งาน

1. บังคับ HTTPS (Force HTTPS)

if (location.protocol !== "https:") {
    location.replace(`https:${location.href.substring(location.protocol.length)}`);
}

2. ตรวจสอบ Environment

const isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
const isDev = location.port === "3000" || location.port === "5173";
const isProd = location.protocol === "https:" && !isLocal;

3. สร้าง API Base URL

const API_BASE = `${location.protocol}//${location.host}/api`;
// https://example.com/api

4. Redirect หลัง Login

function redirectAfterLogin() {
    const redirectUrl = new URLSearchParams(location.search).get("redirect") || "/dashboard";
    location.href = redirectUrl;
}

ข้อควรระวัง

• location.protocol คืนค่าพร้อม Colon (:) เสมอ → "https:" ไม่ใช่ "https"
• การตั้งค่า location.protocol = "https:" จะทำให้หน้าเว็บโหลดใหม่ (Reload)
• บาง Browser ไม่อนุญาตให้เปลี่ยน Protocol ข้าม Origin (Security)