js如何获取当前网站的协议、域名、端口号
更新时间：2025年01月24日 08:57:11 作者：小嘟嚷ovo
文章介绍了如何使用JavaScript的window.location对象获取当前网站的协议、域名、端口号,并提供了示例代码,此外,还介绍了如何将这些部分组合成一个完整的URL
js获取当前网站的协议、域名、端口号
在JavaScript中，你可以通过window.location对象来获取当前网站的URL信息，包括协议（protocol）、域名（hostname）、端口号（port）等。
以下是如何分别获取这些信息的示例：
1. 获取协议（Protocol）
协议部分可以通过window.location.protocol获取，这将返回包括冒号（:）的协议名称，例如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中未明确指定端口号，并且协议是http，则端口号默认为80；如果协议是https，则端口号默认为443。
然而，window.location.port在这些情况下将不会返回默认值，而是返回空字符串""。
var port = window.location.port; console.log(port); // 输出：例如 8080 或 ""（如果未指定且为默认端口）
示例：组合URL部分
如果你想要将协议、域名和端口号（如果非默认）组合起来，你可以这样做：
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
请注意：
- 这个组合假设你想要一个可以用于构造新URL的基础URL。
- 如果你的目标是检查或分析当前页面的URL，则直接访问window.location的各个属性通常就足够了。
4. 获取协议域名端口号一起（Origin）
端口号可以通过window.location.origin获取。
var origin = window.location.origin; console.log(origin); // 输出：https://example.com:8080
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了用原生JS实现爱奇艺首页导航栏代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
JavaScript 数组可以保存混合类型的不同值，例如字符串、空值或布尔值，并且不需要数组的大小来指定它在哪里自动增长和动态，这篇文章主要介绍了javascript 中按属性值查找数组中的对象多种方法,需要的朋友可以参考下2023-06-06
这篇文章主要为大家详细介绍了JavaScript实现多球运动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要为大家详细介绍了JS HTML5实现拖拽移动列表效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要为大家详细介绍了基于JavaScript实现轮播图原理及示例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要为大家详细介绍了微信小程序实现车牌键盘，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了javascript数组中的findIndex方法，findIndex() 方法返回传入一个测试条件函数符合条件的数组第一个元素位置，下面更多相关资料，需要的小伙伴可以参考一下2022-03-03
这篇文章主要以图片展示的方式向大家讲解了js图片轮播效果的实现方法，对图片轮播实现原理进行了详细介绍，感兴趣的朋友可以参考一下2015-12-12
Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。这篇文章主要介绍了Nuxt.js开启SSR渲染 ,需要的朋友可以参考下2018-11-11
这篇文章介绍了页面实时显示当前时间的简单实例，有需要的朋友可以参考需要2013-07-07
最新评论