js如何獲取當前網(wǎng)站的協(xié)議、域名、端口號
更新時間：2025年01月24日 08:57:11 作者：小嘟嚷ovo
文章介紹了如何使用JavaScript的window.location對象獲取當前網(wǎng)站的協(xié)議、域名、端口號,并提供了示例代碼,此外,還介紹了如何將這些部分組合成一個完整的URL
js獲取當前網(wǎng)站的協(xié)議、域名、端口號
在JavaScript中，你可以通過window.location對象來獲取當前網(wǎng)站的URL信息，包括協(xié)議（protocol）、域名（hostname）、端口號（port）等。
以下是如何分別獲取這些信息的示例：
1. 獲取協(xié)議（Protocol）
協(xié)議部分可以通過window.location.protocol獲取，這將返回包括冒號（:）的協(xié)議名稱，例如http:或https:。
var protocol = window.location.protocol; console.log(protocol); // 輸出：http: 或 https:
2. 獲取域名（Hostname）
域名部分可以通過window.location.hostname獲取，這將返回不包括端口號的域名。
var hostname = window.location.hostname; console.log(hostname); // 輸出：例如 example.com
3. 獲取端口號（Port）
端口號可以通過window.location.port獲取。
如果URL中未明確指定端口號，并且協(xié)議是http，則端口號默認為80；如果協(xié)議是https，則端口號默認為443。
然而，window.location.port在這些情況下將不會返回默認值，而是返回空字符串""。
var port = window.location.port; console.log(port); // 輸出：例如 8080 或 ""（如果未指定且為默認端口）
示例：組合URL部分
如果你想要將協(xié)議、域名和端口號（如果非默認）組合起來，你可以這樣做：
var protocol = window.location.protocol; var hostname = window.location.hostname; var port = window.location.port ? ':' + window.location.port : ''; // 如果端口號不是默認，則添加':'和端口號 var baseUrl = protocol + '//' + hostname + port; console.log(baseUrl); // 輸出：例如 https://example.com:8080 或 http://example.com
請注意：
- 這個組合假設(shè)你想要一個可以用于構(gòu)造新URL的基礎(chǔ)URL。
- 如果你的目標是檢查或分析當前頁面的URL，則直接訪問window.location的各個屬性通常就足夠了。
4. 獲取協(xié)議域名端口號一起（Origin）
端口號可以通過window.location.origin獲取。
var origin = window.location.origin; console.log(origin); // 輸出：https://example.com:8080
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
用原生JS實現(xiàn)愛奇藝首頁導(dǎo)航欄代碼實例
這篇文章主要介紹了用原生JS實現(xiàn)愛奇藝首頁導(dǎo)航欄代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
javascript 中按屬性值查找數(shù)組中的對象多種方法
JavaScript 數(shù)組可以保存混合類型的不同值，例如字符串、空值或布爾值，并且不需要數(shù)組的大小來指定它在哪里自動增長和動態(tài)，這篇文章主要介紹了javascript 中按屬性值查找數(shù)組中的對象多種方法,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)多球運動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要為大家詳細介紹了JS HTML5實現(xiàn)拖拽移動列表效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)輪播圖原理及示例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)車牌鍵盤，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
?javascript數(shù)組中的findIndex方法?
這篇文章主要介紹了javascript數(shù)組中的findIndex方法，findIndex()?方法返回傳入一個測試條件函數(shù)符合條件的數(shù)組第一個元素位置，下面更多相關(guān)資料，需要的小伙伴可以參考一下2022-03-03
這篇文章主要以圖片展示的方式向大家講解了js圖片輪播效果的實現(xiàn)方法，對圖片輪播實現(xiàn)原理進行了詳細介紹，感興趣的朋友可以參考一下2015-12-12
Nuxt.js 是一個基于 Vue.js 的通用應(yīng)用框架。 通過對客戶端/服務(wù)端基礎(chǔ)架構(gòu)的抽象組織，Nuxt.js 主要關(guān)注的是應(yīng)用的 UI渲染。這篇文章主要介紹了Nuxt.js開啟SSR渲染 ,需要的朋友可以參考下2018-11-11
JavaScript實現(xiàn)頁面實時顯示當前時間的簡單實例
這篇文章介紹了頁面實時顯示當前時間的簡單實例，有需要的朋友可以參考需要2013-07-07