JavaScript >> Javascript 文檔 >  >> Tags >> URL

JavaScript:獲取當前 URL 和組件(協議、域、端口、路徑、查詢、哈希)

簡介

在本教程中,我們將了解如何獲取當前 URL 加載的 HTML 頁面,使用 JavaScript。

首先我們來看一個URL:

https://www.stackabuse.com:8080/category/article-title.html?searchterm=Example+title#2

這是一個虛構的 URL,包含幾個組件 - 協議 , , 端口 , 路徑 , 查詢散列 .

網址組件

我們定義的 URL 由不同的段組成,由某些特殊字符分隔,例如 / , ?# .這些段中的每一個都是一個URL 組件

  • 協議 - URL 的協議是指定義哪個 protocol 的 URL 段 用於數據傳輸。在我們的例子中,我們使用 https:// , 表示 HTTPS 協議。

  • - 域,也稱為 URL 的主機名,指的是 URL 的前一部分 - www.stackabuse.com .

  • 端口 - URL 的端口部分在域之後指定,以 : 開頭 .大多數情況下,該端口是不公開的,因此您很少會在已部署的應用程序中真正看到它,但在開發階段非常常見。

  • 路徑 - URL 的路徑部分跟隨域名和端口。它指定網站、HTML 頁面、圖像或某些其他類型的文件或目錄上的單個資源。在我們的示例中,路徑/category/article-title.html 段,表示它指向 article-title.html 服務器上的文件。

  • 查詢 - 查詢是一個字符串,通常用於在網站上啟用內部搜索。查詢部分參考?articleTitle=Example+title 示例 URL 的部分,是用戶輸入搜索詞 Example title 的結果 在 article-title.html 網站頁面。

  • 哈希 - hash 部分通常用於表示頁面上的錨點,通常是標題,但也可以是任何其他 <div> 或標籤,假設我們瞄準它的 id 屬性。在我們的例子中,我們的目標是 #2 ,將用戶的視圖滾動到帶有 id=2 的標籤 .

一般來說,URL 具有相當標準化的結構,其中某些元素是可選的,而另一些則不是:

<protocol>//<domain>:<port>/<path>/<query><hash>

現在,我們可以仔細看看如何使用 JavaScript 訪問當前 URL,以及它的每個組件。

如何在 JavaScript 中獲取當前 URL

在 JavaScript 中,Location 對象包含有關當前加載網頁的 URL 的信息。它屬於 window ,不過,我們可以直接訪問它,因為 window 在層次上位於範圍的頂部

要獲取當前 URL,我們將利用 Location 對象並檢索其 href 屬性:

var url = window.location.href
console.log(url)

這導致:

https://www.stackabuse.com:8080/python/article-title.html?searchterm=Example+title#2

href 屬性包含當前加載資源的完整 URL。如果您想檢索某些特定組件,而不是整個 URL,則 Location 對像也有各種屬性。

獲取網址來源

window.location.origin 屬性返回基本 URL(協議 + 主機名 + 端口號) 當前網址:

console.log(window.location.origin)
https://www.stackabuse.com:8080

獲取 URL 協議

window.location.protocol 屬性返回協議 當前網址使用:

console.log(window.location.protocol)
https://

獲取 URL 主機和主機名

window.location.host 屬性返回主機名和端口號 當前網址:

console.log(window.location.host)
www.stackabuse.com:8080

另一方面,window.location.hostname 屬性返回主機名 當前網址:

console.log(window.location.hostname)
www.stackabuse.com

獲取 URL 端口

window.location.port 屬性返回端口號 當前網址:

console.log(window.location.port)
8080

獲取網址路徑

window.location.pathname 屬性返回路徑部分 當前網址:

console.log(window.location.pathname)
/category/article-title.html

獲取 URL 查詢和哈希

window.location.search 屬性返回**當前URL的查詢部分**:

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

console.log(window.location.search)
?searchterm=Example+title

window.location.hash 屬性返回哈希部分 當前網址:

console.log(window.location.hash)
#2

結論

正如我們所見,JavaScript a 提供了強大而簡單的訪問當前 URL 的方法。 Location 對象,由 Window 訪問 接口使我們不僅可以獲取當前 URL 的字符串表示形式,還可以獲取其中的每個部分。

Location 對像還可以更改和操作當前 URL,以及將頁面重定向到新 URL。


Tutorial JavaScript 教程
  1. 是否可以將 ECMAScript 6 生成器重置為其初始狀態?

  2. Formidablejs:單人框架

  3. 第 3/100 天,100 天的代碼

  4. 如何使用 useEffect() 獲取外部 API

  5. 如何使用 JavaScript 集合類型,初學者指南

  6. 挑戰:創建儀表板

  7. 你一直想要但不知道的 React CLI

  1. JavaScript:如何實現 WebSocket 後端

  2. Friday Frontend:框架生態系統版

  3. 使用 Fastify 構建 CRUD API

  4. 不使用 jQuery 實現 Twitter 滾動

  5. 將對象存儲在 React 組件的狀態中?

  6. 使用 Nodejs 構建 Discord Bot - 項目 01

  7. 是什麼讓我使用 SWR?

  1. [Express] React 作為視圖模板引擎?

  2. Node.js 任務運行器:它們適合你嗎?

  3. 如何在 Cloud Firestore 中部分更新文檔

  4. 為什麼 React 勝過 Angular?