【Web APIs】BOM 浏览器对象模型 ⑥ ( location 对象 | location 常用属性和便捷的方法 | URL 简介 )

一、location 对象

1、location 对象简介

location 对象相当于浏览器的 " 地址栏管理器 " , 它包含了当前页面的 URL 信息 , 并且提供了一系列属性和方法来操作 URL、跳转页面或刷新页面 ;

location 对象相当于一个 " URL 工具箱 " , 让 JavaScript 能够读取和修改浏览器地址栏的内容 ;

2、location 对象常用属性

location 对象的属性对应 URL 的各个部分 , 以下是最常用的属性 :

// 假设当前URL是 : https://www.example.com:8080/path/page?id=123#section1
console.log(location.href);      // 完整URL : "https://www.example.com:8080/path/page?id=123#section1"
console.log(location.protocol);  // 协议 : "https:" ( 注意末尾有冒号 ) 
console.log(location.host);      // 主机名+端口 : "www.example.com:8080" ( 端口可省略 , 默认80/443 ) 
console.log(location.hostname);  // 主机名 : "www.example.com" ( 不含端口 ) 
console.log(location.port);      // 端口 : "8080" ( 无端口时返回空字符串 ) 
console.log(location.pathname);  // 路径 : "/path/page" ( 以斜杠开头 ) 
console.log(location.search);    // 查询参数 : "?id=123" ( 以问号开头 ) 
console.log(location.hash);      // 锚点 ( 哈希 )  : "#section1" ( 以井号开头 )

在 F12 开发者模式中 , 在 Console 控制台中 , 输入 location 可以查看 location 对象属性 , 如下图所示 :

在这里插入图片描述

3、location.href 属性用法

location.href 属性是 BOM 中 location 对象的核心属性 , 作用是 :

读取 location.href 时 : 返回当前页面的完整 URL 字符串 ( 包含协议、主机名、路径、查询参数、锚点等所有部分 ) ;
修改 location.href 时 : 直接跳转到新的 URL 地址 ( 等同于调用 location.assign() 方法 ) ;

location.href 属性是 location 对象中最灵活、最常用的属性 , 兼具 " 读取 " 和 " 跳转 " 双重功能 ;

读取 location.href 属性 : 获取当前页面的完整 URL ;

// 假设当前页面 URL 是 : https://www.example.com/path?name=test#section1
console.log(location.href);
// 输出 : "https://www.example.com/path?name=test#section1" ( 完整URL )

赋值 location.href 属性 : 直接给 location.href 赋值新 URL , 浏览器会立即跳转到该地址 , 且会记录历史记录 ( 点击 " 后退 " 可返回原页面 ) ;

赋值后页面会立即跳转 , 后续代码可能无法执行 ( 需注意执行顺序 ) ;
支持绝对路径 ( https://xxx ) 和相对路径 ( /xxx 或 ./xxx ) ;
带锚点 ( #xxx ) 的跳转不会刷新页面 , 仅滚动到页面内对应 id 的元素 ;

// 1. 跳转到外部网站
location.href = "https://www.baidu.com";
// 2. 跳转到当前域名下的内部页面
location.href = "/user/profile"; // 相对路径 ( 基于当前域名 ) 
// 3. 带查询参数的跳转 ( 传递数据 ) 
location.href = "/product?pid=1001&name=手机"; // 跳转并传递pid和name参数
// 4. 带锚点的跳转 ( 页面内定位 ) 
location.href = "/article#comment"; // 跳转到文章的评论区 ( 无需刷新页面 )

刷新页面特殊用法 : 给 location.href 赋值当前页面的 URL , 或直接赋值 location.href ( 自身赋值 ) , 可实现页面刷新 ;

// 方式1 : 赋值当前URL ( 普通刷新 , 可能使用缓存 ) 
location.href = location.href;
// 方式2 : 更简洁的写法 ( 效果同上 ) 
location.href = "";
// 方式3 : 带随机参数 , 强制刷新 ( 避免缓存 ) 
location.href = location.href + "?t=" + Math.random();

4、location.search 属性用法

location.search 属性是 location 对象的只读属性 ( 读取时 ) , 作用是 :

返回当前 URL 中查询参数部分 , 以 ? 开头 , 包含所有键值对 ( 如 ?id=123&name=test ) ;
若 URL 中没有查询参数 , 返回空字符串 ( “” ) ;

基础示例 :

// 假设当前 URL 是 : https://www.example.com/page?pid=100&name=手机&price=3999#detail
console.log(location.search);
// 输出 : "?pid=100&name=手机&price=3999" ( 仅包含 ? 及后面的参数 , 不包含锚点 #detail )

location.search 属性仅返回原始的参数字符串 , 实际开发中需要解析成 " 键值对 " 才能使用 ; 推荐使用浏览器原生的 URLSearchParams API 进行解析 ( URLSearchParams 无需第三方库 , 简单高效 , 支持所有现代浏览器 ) ;

解析单个参数 :通过 URLSearchParams.get(key) 方法获取指定参数的值 , 若参数不存在返回 null ;

// 1. 获取 search 原始字符串
const searchStr = location.search; // 例如 : "?pid=100&name=手机&price=3999"
// 2. 创建 URLSearchParams 实例 ( 自动处理 ? 符号 , 无需手动截取 ) 
const params = new URLSearchParams(searchStr);
// 3. 获取指定参数 ( 返回字符串类型 ) 
const pid = params.get("pid");       // 输出 : "100" ( 注意 : 是字符串 , 不是数字 ) 
const name = params.get("name");     // 输出 : "手机" ( 中文需确保编码正确 ) 
const price = params.get("price");   // 输出 : "3999"
const age = params.get("age");       // 输出 : null ( 参数不存在 ) 
// 4.  ( 可选 ) 转换参数类型 ( 如数字类型 ) 
const pidNum = Number(pid);          // 转换为数字 : 100

解析多个同名参数 : 若 URL 中存在多个同名参数 ( 如 ?tag=科技&tag=数码 ) , 用 getAll(key) 方法获取所有值 ( 返回数组 ) ;

// 假设 URL 是 : https://www.example.com/list?tag=科技&tag=数码&page=2
const params = new URLSearchParams(location.search);
const tags = params.getAll("tag");    // 输出 : ["科技", "数码"] ( 数组形式 ) 
const page = params.get("page");      // 输出 : "2"

遍历所有查询参数 : 若不确定参数名称 , 或需要批量处理所有参数 , 用 forEach() 遍历 ;

// 假设 URL 是 : "?id=5&status=active&sort=time"
const params = new URLSearchParams(location.search);
// 遍历所有键值对
params.forEach((value, key) => {
console.log(`${key}: ${value}`);
});
// 输出 : 
// id: 5
// status: active
// sort: time

5、location.assign() 方法

location.assign(url) 方法的作用是跳转到指定 URL 页面 , 会在浏览器历史记录中添加一条新记录 , 跳转后点击 " 后退 " 按钮可返回原页面 ( 与 location.href = url 效果完全一致 ) ;

跳转后保留原页面历史记录 , 可通过浏览器 " 后退 " 返回 ;
若 URL 包含中文、空格等特殊字符 , 需先用 encodeURIComponent() 编码 ( 同 location.href 的要求 ) ;
执行后浏览器会立即跳转 , 跳转语句后的同步代码可能无法执行 ( 需放在跳转前 ) ;

代码示例 :

// 语法 : location.assign(URL字符串)
// 支持 绝对路径 ( 外部网站 ) 和 相对路径 ( 当前域名下页面 ) 
// 示例1 : 跳转到外部网站 ( 绝对路径 ) 
location.assign("https://www.baidu.com");
// 示例2 : 跳转到当前域名下的内部页面 ( 相对路径 ) 
location.assign("/user/profile"); // 等价于 location.href = "/user/profile"
// 示例3 : 带查询参数的跳转 ( 传递数据 ) 
location.assign("/product?pid=1001&name=手机");

6、location.replace() 方法

location.replace(url) 方法的作用是跳转到指定 URL 页面 , 但会替换当前页面的历史记录 ( 不新增记录 ) , 跳转后无法通过 " 后退 " 按钮返回原页面 ( 原页面从历史记录中移除 ) ;

不保留原页面历史记录 , 适合 " 一次性跳转 " 场景 ( 避免用户回退到敏感页面 ) ;
跳转后原页面的历史记录被替换 , 浏览器 " 后退 " 按钮会指向跳转前的前一个页面 ( 而非当前原页面 ) ;
同样支持绝对 / 相对路径 , 特殊字符需编码 ;

代码示例 :

// 语法 : location.replace(URL字符串)
// 支持绝对路径和相对路径 , 用法与 assign() 一致 , 但历史记录处理不同
// 示例1 : 登录成功后跳转首页 ( 不可后退到登录页 ) 
// 假设登录接口请求成功后执行 : 
location.replace("/home"); // 跳转后无法回退到登录页
// 示例2 : 支付完成后跳转结果页 ( 不可后退到支付页 ) 
location.replace("/pay/success?orderId=8888");

7、location.reload() 方法

location.reload(force) 方法的作用是刷新当前页面 , 可选参数 force 控制是否 " 强制刷新 " ( 忽略缓存 ) ;

普通刷新 ( 无参数 ) :浏览器会优先加载缓存中的资源 ( 如图片、CSS/JS 文件 ) , 加载速度快 , 但可能无法获取最新资源 ;
强制刷新 ( true 参数 ) :浏览器会重新请求服务器所有资源 ( 包括静态文件、接口 ) , 确保获取最新数据 , 但加载速度较慢 ;
执行后页面会立即刷新 , 刷新语句后的同步代码无法执行 ;
避免在页面加载时频繁调用 ( 可能导致无限刷新循环 ) ;

代码示例 :

// 语法 : location.reload(force)
// force 是布尔值 , 可选 ( 默认 false )  : 
// - false : 普通刷新 ( 默认 )  , 优先使用浏览器缓存 ( 如静态资源、接口数据 ) 
// - true : 强制刷新 , 忽略缓存 , 重新向服务器请求所有资源
// 示例1 : 普通刷新 ( 可能使用缓存 ) 
location.reload(); // 等价于按浏览器 " 刷新 " 按钮
// 示例2 : 强制刷新 ( 忽略缓存 , 适用于修改配置后 ) 
location.reload(true); // 等价于按 Ctrl+F5 ( 强制刷新 )

8、assign()、replace()、reload() 方法对比

方法名	核心功能	历史记录处理	能否后退	等价操作 / 关联属性	典型适用场景
`assign(url)`	页面跳转	新增一条历史记录	能	等同于 `location.href = url`	普通页面跳转 ( 如列表 -> 详情、首页 -> 关于页 )
`replace(url)`	页面跳转	替换当前历史记录	不能	无等价属性 , 单独方法	登录后 -> 首页、支付后 -> 结果页 ( 敏感页面跳转 )
`reload(force)`	页面刷新	不改变历史记录	- ( 无跳转 )	无等价属性 , 单独方法	无等价属性 , 单独方法

开发选择逻辑 :

若需要 " 跳转后可回退 " -> 用 assign(url) 或 location.href = url ( 两者完全等价 , 推荐 assign() 语义更清晰 ) ;
若需要 " 跳转后不可回退 " -> 用 replace(url) ( 敏感页面跳转 , 避免用户回退 ) ;
若需要 " 刷新当前页面 " -> 普通刷新用 reload() , 需要最新资源用 reload(true) ;
跳转时 URL 含中文 / 特殊字符 -> 先通过 encodeURIComponent() 编码 ( 同之前 location.href 的要求 ) ;

二、URL 简介

1、URL 概念

URL 是统一资源定位符 ( Uniform Resource Locator ) , 是互联网中用于唯一标识、定位某一资源 ( 网页、图片、接口、文件等 ) 的标准化地址格式 , 是浏览器 / 客户端获取资源的 " 导航坐标 " ;

互联网中每个资源文件都有一个唯一的 URL 地址 , 该地址中有如下核心作用 :

网络地址 :告知浏览器 / 客户端互联网资源的位置 ;
访问方式 : 通过协议类型告知浏览器如何访问该资源 , 如 : HTTP、HTTPS、RTMP ;
唯一标识 : 是资源文件的唯一标识 ;

URL 与 URI 区别 :

URI 是统一资源标识符 ( Uniform Resource Identifier ) , 是资源的名称或地址 , 其范围更广 ;
URL 是 URI 的子集 , 专注于 " 定位资源 " , 即 URI 中包含 " 位置信息 " 的类型 ;

2、URL 语法

URL 的语法遵循 [协议]://[授权信息]@[主机名]:[端口]/[路径]?[查询参数]#[锚点] 的规范 ;

核心结构可拆解为以下 7 个组件 :

组件	格式要求	可选性	说明与示例
协议 ( Scheme )	以 `://` 结尾 , 指定访问资源的协议类型	必选	常见协议 : - `http://` : 超文本传输协议 ( 明文 , 默认端口 80 ) ; - `https://` : 加密传输协议 ( HTTPS , 默认端口 443 ) ; - `ftp://` : 文件传输协议 ( 用于下载文件 ) ; - `file://` : 本地文件协议 ( 访问本地电脑文件 ) ;
授权信息 ( Userinfo )	`用户名:密码@` ( 已逐步淘汰 , 安全性低 )	可选	示例 : `ftp://user:123456@ftp.example.com` ( FTP 服务器登录授权 , 现代场景极少使用 ) ;
主机名 ( Hostname )	资源所在服务器的域名或 IP 地址	必选	示例 : `www.example.com` ( 域名 ) 、`192.168.1.1` ( IP 地址 ) ;
端口 ( Port )	`:` + 数字 ( 0-65535 ) , 指定服务器上的服务端口	可选	- 未指定时使用协议默认端口 ( HTTP -> 80 , HTTPS -> 443 , FTP -> 21 ) ; - 示例 : `https://www.example.com:8080` ( 指定端口 8080 ) ;
路径 ( Path )	以 " / " 开头 , 资源在服务器上的具体存储路径	可选	示例 : `/api/user/list` ( 接口路径 ) 、`/images/logo.png` ( 图片文件路径 ) ;
查询参数 ( Query )	`?` + 键值对 ( `key1=value1&key2=value2` ) , 用于向服务器传递动态参数	可选	示例 : `?id=123&name=test` ( 传递 id=123 和 name=test 两个参数 ) , 可通过`URLSearchParams`解析 ;
锚点 ( Fragment )	`#` + 字符串 , 用于定位页面内的具体位置 ( 如章节、元素 )	可选	示例 : `#section1` ( 定位到页面中`id="section1"`的元素 ) , 锚点信息仅在客户端生效 , 不会发送到服务器 ;

3、URL 示例

URL 示例 :https://admin:123@www.example.com:8080/path/file.html?id=456&type=info#top , 下面表格中的内容就是对应的 URL 语法中的各个分解元素 ;

组件	对应内容
协议	`https://`
授权信息	`admin:123@`
主机名	`www.example.com`
端口	`8080`
路径	`/path/file.html`
查询参数	`?id=456&type=info`
锚点	`#top`

三、代码示例

1、代码示例 - location.href 属性实现页面跳转

代码示例 :

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>location.href 属性实现页面跳转</title>
          </head>
          <body>
          <button>页面跳转</button>
            <script>
              // 获取按钮元素
              var btn = document.querySelector('button');
              // 为按钮元素添加点击事件
              // 为 location.href 属性赋值一个 URL 网页地址 
              // 点击按钮 , 跳转到该地址
              btn.addEventListener('click', function() {
              location.href = "https://hanshuliang.blog.csdn.net/";
              });
            </script>
          </body>
        </html>

执行结果 :
在这里插入图片描述

2、代码示例 - location.href 属性实现页面跳转 + 定时器

代码示例 :

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>location.href 属性实现页面跳转</title>
          </head>
          <body>
          <div></div>
            <script>
              // 获取显示倒计时的 div 元素
              var div = document.querySelector('div');
              // 设置 5 秒后自动跳转到指定页面
              var timer = 5;
              // 设置定时器 , 循环执行某个函数
              setInterval(function() {
              if (timer == 0) {
              // 当定时器运行 5 秒后 , 执行跳转操作
              location.href = 'https://hanshuliang.blog.csdn.net/';
              } else {
              // 定时器开始执行后 , 显示页面倒计时
              div.innerHTML = timer + '秒 后跳转页面';
              timer--;
              }
              }, 1000);
            </script>
          </body>
        </html>

执行结果 :
在这里插入图片描述

3、代码示例 - location.assign() 函数用法

使用 location.assign('https://hanshuliang.blog.csdn.net/') 跳转界面 , 会记录浏览历史 , 可以使用会推荐回退 ;

代码示例 :

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>location 对象</title>
          </head>
          <body>
          <button>点击 跳转 / 刷新 界面</button>
            <script>
              // 按钮对象，注册点击事件
              var btn = document.querySelector('button');
              // 为按钮添加点击事件
              btn.addEventListener('click', function() {
              // 记录浏览历史 ，所以可以实现后退功能
              location.assign('https://hanshuliang.blog.csdn.net/');
              })
            </script>
          </body>
        </html>

执行结果 :
在这里插入图片描述

4、代码示例 - location.replace() 函数用法

使用 location.replace('https://hanshuliang.blog.csdn.net/') 跳转界面 , 不会记录浏览历史 , 不可以使用会推荐回退 ;

代码示例 :

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>location 对象</title>
          </head>
          <body>
          <button>点击 跳转 / 刷新 界面</button>
            <script>
              // 按钮对象，注册点击事件
              var btn = document.querySelector('button');
              // 为按钮添加点击事件
              btn.addEventListener('click', function() {
              // 不记录浏览历史 ，所以不可以实现后退功能
              location.replace('https://hanshuliang.blog.csdn.net/');
              // 刷新当前页面
              //location.reload(true);
              })
            </script>
          </body>
        </html>

执行结果 :

在这里插入图片描述

6、代码示例 - location.reload() 函数用法

使用 location.reload(true) 刷新界面 ;

代码示例 :

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>location 对象</title>
          </head>
          <body>
          <button>点击 跳转 / 刷新 界面</button>
            <script>
              // 按钮对象，注册点击事件
              var btn = document.querySelector('button');
              // 为按钮添加点击事件
              btn.addEventListener('click', function() {
              // 刷新当前页面
              location.reload(true);
              })
            </script>
          </body>
        </html>

执行结果 :

在这里插入图片描述

7、代码示例 - location.search 属性实现页面间属性传递 + 基础字符串处理

代码示例 - 页面一 :

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>页面一 : location.hsearch 属性</title>
          </head>
          <body>
              <form action="page2.html">
                用户名 : <input type="text" name="param">
                  <input type="submit" value="登录">
                </form>
              </body>
            </html>

代码示例 - 页面二 :

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>页面二 : location.hsearch 属性</title>
          </head>
          <body>
          <div></div>
            <script>
              // 获取该页面的 URL 中的参数 "?param=tom"
              console.log(location.search);
              // 1. 先去掉？  使用 substr 函数截取 ? 后面的字符串
              // substr('起始的位置'，截取几个字符);
              // 得到 "param=tom"
              var params = location.search.substr(1); // uname=andy
              console.log(params);
              // 2. 利用=把字符串分割为数组 split('=');
              // 获取数组 ["uname", "ANDY"]
              var arr = params.split('=');
              console.log(arr); // ["param", "tom"]
              // 3. 将参数显示到 div 元素中
              var div = document.querySelector('div');
              div.innerHTML = 'Hello ' + arr[1] + " !";
            </script>
          </body>
        </html>

执行结果 :
在这里插入图片描述

8、代码示例 - location.search 属性实现页面间属性传递 + URLSearchParams 解析参数

代码示例 - 页面一 :

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>页面一 : location.hsearch 属性</title>
          </head>
          <body>
              <form action="page2.html">
                用户名 : <input type="text" name="param">
                  <input type="submit" value="登录">
                </form>
              </body>
            </html>

代码示例 - 页面二 :

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>页面二 : location.hsearch 属性</title>
          </head>
          <body>
          <div></div>
            <script>
              // 获取该页面的 URL 中的参数 "?param=tom"
              console.log(location.search);
              // 1. 获取参数字符串
              var searchStr = location.search;
              // 2. 创建 URLSearchParams 实例（自动处理 ? 符号，无需手动截取）
              const params = new URLSearchParams(searchStr);
              // 3. 将参数显示到 div 元素中
              var div = document.querySelector('div');
              div.innerHTML = 'Hello ' + params.get('param') + " !";
            </script>
          </body>
        </html>

执行结果 :

在这里插入图片描述

posted @ 2026-01-02 09:51 gccbuaa 阅读(0) 评论(0) 收藏举报

刷新页面返回顶部

gccbuaa

【Web APIs】BOM 浏览器对象模型 ⑥ ( location 对象 | location 常用属性和便捷的方法 | URL 简介 )

文章目录

一、location 对象

1、location 对象简介

2、location 对象常用属性

3、location.href 属性用法

4、location.search 属性用法

5、location.assign() 方法

6、location.replace() 方法

7、location.reload() 方法

8、assign()、replace()、reload() 方法对比

二、URL 简介

1、URL 概念

2、URL 语法

3、URL 示例

三、代码示例

1、代码示例 - location.href 属性实现页面跳转

2、代码示例 - location.href 属性实现页面跳转 + 定时器

3、代码示例 - location.assign() 函数用法

4、代码示例 - location.replace() 函数用法

6、代码示例 - location.reload() 函数用法

7、代码示例 - location.search 属性实现页面间属性传递 + 基础字符串处理

8、代码示例 - location.search 属性实现页面间属性传递 + URLSearchParams 解析参数