如何用BOM获取当前页面的URL？

来源：APP编程网作者：大卫头衔：程序员

导读：本期聚焦于小伙伴创作的《如何用BOM获取当前页面的URL？》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《如何用BOM获取当前页面的URL？》有用，将其分享出去将是对创作者最好的鼓励。

在前端开发中，BOM（浏览器对象模型）的window.location对象是获取当前页面URL的核心接口，它包含了当前页面URL的各个组成部分，开发者可以通过访问其不同属性拿到需要的信息。

如何用BOM获取当前页面的URL？

window.location核心属性说明

window.location是一个包含当前页面URL信息的对象，它的常用属性如下：

属性名	说明	示例（假设当前URL为https://ipipp.com:8080/path/page.html?name=test#section）
href	完整的URL字符串	https://ipipp.com:8080/path/page.html?name=test#section
protocol	URL的协议部分，包含末尾的冒号	https:
host	主机名和端口号	ipipp.com:8080
hostname	主机名，不包含端口号	ipipp.com
port	端口号，如果没有显式端口则返回空字符串	8080
pathname	URL的路径部分，以斜杠开头	/path/page.html
search	URL的查询参数部分，以问号开头	?name=test
hash	URL的锚点部分，以井号开头	#section

获取完整URL的示例

如果需要获取当前页面的完整URL，直接访问window.location.href即可，也可以省略window前缀，因为location是全局对象的属性。

// 获取当前页面的完整URL
const fullUrl = location.href;
console.log(fullUrl); // 输出当前页面的完整URL字符串

// 也可以显式使用window前缀，效果一致
const fullUrl2 = window.location.href;
console.log(fullUrl2);

获取URL各部分的示例

如果只需要URL的某个组成部分，可以访问对应的属性，以下是常见场景的代码示例：

// 获取URL的协议
const protocol = location.protocol;
console.log(protocol); // 输出如 "https:"

// 获取主机名（不含端口）
const hostname = location.hostname;
console.log(hostname); // 输出如 "ipipp.com"

// 获取查询参数部分
const searchParams = location.search;
console.log(searchParams); // 输出如 "?name=test&age=18"

// 获取锚点部分
const hash = location.hash;
console.log(hash); // 输出如 "#section"

注意事项

window.location的属性都是可读可写的，如果修改href属性，页面会跳转到新的URL，例如location.href = "https://ipipp.com"会让页面跳转到ipipp.com首页。
如果URL中没有显式端口，port属性会返回空字符串，比如访问https://ipipp.com时，location.port返回空字符串。
如果需要解析查询参数为对象，可以结合URLSearchParamsAPI使用，示例如下：

// 解析查询参数为对象
const params = new URLSearchParams(location.search);
const name = params.get("name");
console.log(name); // 输出查询参数中name对应的值

总结

通过BOM的window.location对象可以轻松获取当前页面的URL及各个组成部分，开发者可以根据实际需求选择对应的属性。完整URL用href，协议用protocol，主机相关用host或hostname，路径用pathname，查询参数用search，锚点用hash，掌握这些属性的用法就能应对大部分URL获取的需求。

BOM window_location URL获取前端开发修改时间：2026-07-16 13:18:28

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。