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