如何使用 JavaScript 取得當前的 URL？
我只想獲取網站的 URL，而不是從鏈接中獲取的 URL。在頁面加載時，我需要能夠抓取網站的完整、當前的 URL，並將其設置為變量，以便隨心所欲地使用。
答案＃1
使用：
window.location.href
如評論中所述，下面的程式碼可以運作，但在 Firefox 上有錯誤。
document.URL
請參見 DOMString 類型的 URL，唯讀。
答案＃2
URL 資訊存取
JavaScript 提供了許多方法來檢索和更改當前的 URL，該 URL 顯示在瀏覽器的地址欄中。所有這些方法都使用 Location 對象，這是 Window 對象的一個屬性。你可以通過讀取 window.location 來獲取當前的 Location 對象：
let currentLocation = window.location;
基本 URL 結構
<protocol>//<hostname>:<port>/<pathname><search><hash>
協議： 指定用於訪問網際網路資源的協議名稱。（HTTP（無 SSL）或 HTTPS（有 SSL））
主機名稱： 主機名稱指定擁有該資源的主機。例如，
www.stackoverflow.com。伺服器使用主機名稱提供服務。連接埠： 用來識別特定程序的連接埠號碼，當網際網路或其他網路訊息到達伺服器時，訊息將會被轉送到該程序。
路徑名稱： 此路徑提供有關 Web 客戶端想要訪問的主機內特定資源的資訊。例如，
/index.html。搜索：查詢字串跟隨在路徑組件之後，提供資源可用於某些用途的資訊字串（例如，作為搜尋的參數或作為要處理的資料）。
hash: URL 的錨點部分，包括井號 (#)。
使用這些 Location 物件屬性，你可以存取所有這些 URL 元件以及它們可以設定或返回的內容：
- href - 整個 URL - 例如
window.location.href - 協議 - URL 的協議
- host - URL 的主機名稱和埠
- hostname - URL 的主機名稱
- port - 伺服器用於 URL 的連接埠號碼
- pathname - URL 的路徑名稱
- search - URL 的查詢部分
- hash - URL 的錨點部分
- origin -
window.location.protocol + ''//'' + window.location.host
答案＃3
使用 window.location 來讀寫與當前框架相關聯的位址物件。如果您只想以唯讀字串的形式取得位址，可以使用 document.URL，它應該包含與 window.location.href 相同的值。
答案＃4
取得當前頁面 URL：
window.location.href
答案＃5
好的，使用純 JavaScript 獲取當前頁面的完整 URL很簡單。例如，在此頁面上嘗試以下代碼：
window.location.href;
// use it in the console of this page will return
// http://stackoverflow.com/questions/1034621/get-current-url-in-web-browser"
window.location.href 屬性會返回當前頁面的 URL。
document.getElementById("root").innerHTML = "The full URL of this page is:<br>" + window.location.href;<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<h3>The window.location.href</h3>
<p id="root"></p>
</body>
</html>也不妨提一下這些：
如果你需要相對路徑，簡單地使用
window.location.pathname；如果你想獲取主機名稱，你可以使用
window.location.hostname;如果你需要單獨獲取協議，使用
window.location.protocol另外，如果你的頁面有
hash標籤，你可以這樣獲取它：window.location.hash。
所以 window.location.href 一次處理所有... 基本上是這樣：
window.location.protocol + '//' + window.location.hostname + window.location.pathname + window.location.hash === window.location.href;
//true
如果已經在 window 範圍內，使用 window 也不是必要的...
所以，在那種情況下，你可以使用：
location.protocol
location.hostname
location.pathname
location.hash
location.href
答案＃6
打開 開發者工具，在 控制台 中輸入以下內容，然後按 Enter。
window.location
例如：以下是當前頁面結果的截圖。
答案＃7
要取得路徑，你可以使用：
console.log('document.location', document.location.href);
console.log('location.pathname', window.location.pathname); // Returns path only
console.log('location.href', window.location.href); // Returns full URL答案＃8
用法：window.location.href。
如上所述，document.URL 在更新 window.location 時不會更新。參見 MDN。
答案＃9
要取得路徑，你可以使用：
http://www.example.com:8082/index.php#tab2?foo=789
Property Result
------------------------------------------
window.location.host www.example.com:8082
window.location.hostname www.example.com
window.location.port 8082
window.location.protocol http:
window.location.pathname index.php
window.location.href http://www.example.com:8082/index.php#tab2
window.location.hash #tab2
window.location.search ?foo=789
window.location.origin https://example.com
答案＃10
- 使用
window.location.href來獲取完整的 URL。 - 使用
window.location.pathname來取得不包含主機的 URL。
答案＃11
// http://127.0.0.1:8000/projects/page/2?name=jake&age=34
let url = new URL(window.location.href);
/*
hash: ""
host: "127.0.0.1:8000"
hostname: "127.0.0.1"
href: "http://127.0.0.1:8000/projects/page/2?username=jake&age=34"
origin: "http://127.0.0.1:8000"
password: ""
pathname: "/projects/page/2"
port: "8000"
protocol: "http:"
search: "?name=jake&age=34"
username: ""
*/
url.searchParams.get('name')
// jake
url.searchParams.get('age')
// 34
url.searchParams.get('gender')
// null
答案＃12
你可以使用以下方法取得帶有井號的當前 URL 位置：
JavaScript：
// Using href
var URL = window.location.href;
// Using path
var URL = window.location.pathname;
jQuery：
$(location).attr('href');
答案＃13
完整的 URL（含查詢字串）:
document.location.toString()
主機網址：
window.location
答案＃14
window.location:
Location {href: "https://stackoverflow.com/questions/1034621/get-the-current-url-with-javascript",
ancestorOrigins: DOMStringList,
origin: "https://stackoverflow.com",
replace: ƒ, assign: ƒ, …}
document.location:
Location {href: "https://stackoverflow.com/questions/1034621/get-the-current-url-with-javascript",
ancestorOrigins: DOMStringList,
origin: "https://stackoverflow.com",
replace: ƒ, assign: ƒ
, …}
window.location.pathname:
"/questions/1034621/get-the-current-url-with-javascript"
window.location.href:
"https://stackoverflow.com/questions/1034621/get-the-current-url-with-javascript"
location.hostname:
"stackoverflow.com"
答案＃15
var currentPageUrlIs = "";
if (typeof this.href != "undefined") {
currentPageUrlIs = this.href.toString().toLowerCase();
}else{
currentPageUrlIs = document.location.toString().toLowerCase();
}
答案 #16
Nikhil Agrawal 的答案很棒，只是在這裡加上一個小例子，你可以在控制台中執行看看不同的組件如何運作：
如果你想要沒有路徑或查詢參數的基礎 URL（例如用於對開發/測試和生產伺服器都適用的 AJAX 請求），window.location.origin 是最好的選擇，因為它同時保留了協議以及可選的端口（在 Django 開發中，有時你會使用非標準端口，如果僅使用主機名等會導致失效）。