location.origin詳解

一、location.origin用法

location.origin是一個只讀屬性，返回當前文檔所在的協議、主機名和端口號，常用於獲取當前頁面的URL的前綴。

console.log(location.origin); 
// 輸出：https://www.example.com （假設當前頁面的URL為https://www.example.com/path/to/page）

在前端開發中，location.origin常常用於做跨域請求的判斷和處理。

二、location.origin mdn

MDN是一個權威的Web前端開發文檔網站，其中包含了關於Web開發各種技術的詳細文檔和示例，location.origin的MDN文檔對於深入了解和使用location.origin非常有幫助。

MDN的location.origin文檔地址為：https://developer.mozilla.org/zh-CN/docs/Web/API/Location/origin

三、location.origin是什麼

location.origin其實是由兩個屬性組成，它們分別是location.protocol和location.host。

location.protocol返回頁面所使用的協議，例如http或https。

location.host返回主機名和端口號，例如www.example.com:8080。

console.log(location.protocol); 
// 輸出：https

console.log(location.host); 
// 輸出：www.example.com:8080

location.origin將以上兩個屬性結合起來，返回當前頁面URL的前綴。

四、location.origin瀏覽器兼容

location.origin是HTML5中新增的屬性，在部分比較老的瀏覽器中可能不被支持，常見的兼容性問題為“undefined”。為此，可以通過以下代碼進行先檢測後使用：

if (typeof window.location.origin === 'undefined') {
  window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
}

console.log(window.location.origin);

以上代碼判斷window.location.origin是否為undefined，如果是，則手動將window.location.origin設置為當前頁面URL的前綴。

五、location.origin可以獲得哪些信息

通過location.origin可以獲得如下信息：

1. 當前頁面的協議（http或https）
2. 當前頁面的主機名（例如www.example.com）
3. 當前頁面的端口號（如果當前頁面URL中包含端口號的話）

同時，在前端開發中，location.origin也常常用於跨域請求的判斷和處理。