在開發網頁應用時，若需要取得網址中的網域名稱（Domain）與協定（Protocol），使用 window.location.origin 是最簡潔且標準的寫法。
⚡ 快速跳轉（依實務情境選擇）：
1. 核心語法與屬性對照表
若要直接取得網址的起始部分（包含協定、主機名稱與埠號），直接呼叫 location.origin 即可。以下為 location 物件中各屬性的對照表：
| 屬性名稱 | 範例值 (基於 https://example.com:8080) | 說明 |
|---|---|---|
location.origin | https://example.com:8080 | 包含協定、網域與 Port 的完整字串 |
location.protocol | https: | 僅包含協定部分 |
location.hostname | example.com | 僅包含網域名稱 |
location.port | 8080 | 僅包含埠號 (若為預設則為空字串) |
核心範例：
// 取得當前頁面的 origin
const domain = window.location.origin;
console.log(domain);
// 輸出範例: https://www.seanacnet.com若在舊專案中需要手動拼接，雖然可以使用 location.protocol + '//' + location.hostname，但此方式無法自動處理 Port 號，建議優先使用 location.origin。
2. 常見開發情境：透過 URL 物件解析
在處理非當前頁面的網址字串時，建議使用 URL 建構函式來解析字串，這比單純操作 window.location 更具彈性。
const urlString = "https://api.seanacnet.com:443/v1/users?id=123";
const urlObj = new URL(urlString);
console.log(urlObj.origin);
// 輸出: https://api.seanacnet.com
console.log(urlObj.hostname);
// 輸出: api.seanacnet.com透過 new URL()，你可以輕鬆提取任意網址的 origin，而不需要依賴瀏覽器當前的 window 物件環境。
3. 常見 Q&A：相容性與 undefined 排錯
Q1：location.origin 在 IE 瀏覽器可以使用嗎？
location.origin 在 Internet Explorer (IE) 中是不支援的。若專案必須支援 IE，建議使用以下 Polyfill 寫法：
if (!window.location.origin) {
window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
}Q2：為什麼在某些環境下 location.origin 會回傳 undefined？
這通常發生在非瀏覽器環境（如 Node.js 或某些 Server-side Rendering 環境）。在這些環境中，並沒有 window 或 location 全域物件。請確保程式碼運行在瀏覽器端，或使用 URL 物件處理字串。
Q3：如何取得不含 Port 的網域名稱？
如果 location.origin 包含了 Port（例如 :8080），但你只需要網域，請使用 location.hostname：
// 若網址為 https://example.com:8080
console.log(location.hostname); // 輸出: example.com更多關於 JavaScript 取得網址參數的詳細整理，可參考站內文章：[JS] Javascript 取得目前 URL 與相關參數(總整理)。
1 則自動引用通知