本文介绍如何在JavaScript中通过window.location对象提取当前网站的协议、域名和端口号。详细解析protocol、hostname、port及origin属性的返回值差异，特别是默认端口的处理逻辑，并提供组合基础URL的实用代码示例。
JS提取当前网页的协议、域名及端口信息
利用JavaScript的window.location对象，可以提取当前网站URL的各项要素，涵盖协议、域名与端口号。
以下代码展示了分别提取上述信息的具体方法：
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.com3. 提取端口号（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，直接读取window.location属性即可。
4. 获取协议、域名及端口组合（Origin）
通过window.location.origin属性获取完整源地址。
var origin = window.location.origin;
console.log(origin); // 输出：https://example.com:8080总结
以上内容基于个人经验整理，旨在提供参考，欢迎支持本站。