JavaScript 中 BOM 怎么使用 location 对象解析和修改当前网页的 URL-js教程-PHP中文网

location对象是bom核心，可读取解析修改url而不刷新页面；支持href、protocol、hostname等属性拆解url，推荐urlsearchparams解析query，用replacestate更新search或直接改hash，assign/replace/reload实现不同跳转方式。

javascript 中 bom 怎么使用 location 对象解析和修改当前网页的 url

JavaScript 中的 location 对象是 BOM（浏览器对象模型）的核心之一，它让你能读取、解析甚至修改当前页面的 URL，无需刷新就能更新地址栏——这对单页应用（SPA）、参数传递、锚点跳转等场景非常关键。

一、用 location 属性拆解 URL 各部分

假设当前页面 URL 是：
https://shop.example.com:3000/products/list?category=shoes&sort=price#top

你可以直接读取以下只读（或可写）属性获取结构化信息：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

location.href → 完整 URL 字符串（可赋值跳转）
location.protocol → "https:"（含冒号）
location.hostname → "shop.example.com"（不含端口）
location.host → "shop.example.com:3000"（含端口）
location.port → "3000"（默认端口如 80/443 时为空字符串）
location.pathname → "/products/list"（路径部分）
location.search → "?category=shoes&sort=price"（查询字符串）
location.hash → "#top"（锚点，含 # 号）
location.origin → "https://shop.example.com:3000"（协议+主机+端口，只读）

二、安全解析 query 参数（推荐用 URLSearchParams）

location.search 返回的是带问号的字符串，直接解析易出错。现代标准做法是用 URLSearchParams：

const params = new URLSearchParams(location.search);
console.log(params.get('category')); // "shoes"
console.log(params.get('sort'));      // "price"
console.log(params.has('page'));      // false
<p>// 转为普通对象（可选）
const obj = Object.fromEntries(params);
// { category: "shoes", sort: "price" }
</p>

三、修改 URL 而不刷新页面

仅改 hash 或 search 且不触发刷新，需配合 history.replaceState()：

改哈希值（最简单）：location.hash = '#detail-123'; → 地址栏变，页面不刷新，会触发 hashchange 事件

改查询参数（推荐方式）：

function updateSearch(key, value) {
  const url = new URL(location.href);
  url.searchParams.set(key, value);
  history.replaceState(null, '', url);
}
updateSearch('page', '2'); // URL 变为 ?category=shoes&sort=price&page=2

⚠️ 注意：直接赋值 location.search = '?id=5' 会强制刷新页面，不推荐

四、跳转与重载页面的三种方式

location.assign(url)：加载新页面，保留历史记录，用户可点「后退」返回
location.replace(url)：替换当前页面，不留下原页面记录，无法后退（适合登录跳转、错误页）
location.reload()：
- location.reload() → 从缓存加载（类似 F5）
- location.reload(true) → 强制从服务器重新加载（类似 Ctrl+F5）