当前位置：首页 > 行业动态 > 正文

html文档中的location对象属性理解及常见的用法

location对象用于获取或设置当前文档URL，常见属性如 href（完整地址）、 pathname（路径）、 search（参数），方法如 assign()跳转、 reload()刷新，常

Location 对象

location 是浏览器提供的 BOM（Browser Object Model）对象，属于 window 对象的一个属性，用于获取或设置当前文档的 URL 信息,它提供了多种属性和方法来操作页面的地址。

Location 对象的常用属性

属性名 类型 描述 示例
href 字符串 当前页面的完整 URL location.href 返回 https://example.com/page?name=john#section
protocol 字符串 协议部分（http: 或 https:） location.protocol 返回 https:
host 字符串 主机名（域名+端口号，如 example.com:80） location.host 返回 example.com
hostname 字符串 主机名（仅域名，不含端口） location.hostname 返回 example.com
port 字符串 端口号（如果省略则返回空字符串） location.port 返回 80（URL 是 http://example.com:80）
pathname 字符串 路径部分（如 /page/index.html） location.pathname 返回 /page/index.html
search 字符串 查询参数部分（如 ?name=john） location.search 返回 ?name=john
hash 字符串 锚点部分（如 #section） location.hash 返回 #section
origin 字符串 当前页面的源（协议+主机+端口，如 https://example.com:80） location.origin 返回 https://example.com

Location 对象的常用方法

方法名 功能描述 示例代码
assign() 跳转到指定 URL，保留历史记录 location.assign('https://example.com')
replace() 跳转到指定 URL，不保留历史记录 location.replace('https://example.com')
reload() 重新加载当前页面 location.reload()（相当于浏览器刷新按钮）
toString() 返回完整的 URL 字符串（与 href 属性相同） location.toString() 返回 https://example.com/page?name=john#section

常见应用场景

页面跳转

  • 跳转到新页面并保留历史记录： 
    location.assign('https://example.com');
  • 跳转到新页面但不保留历史记录： 
    location.replace('https://example.com');

传递参数并跳转

// 添加查询参数并跳转
location.assign('https://example.com?name=john&age=25');

强制刷新页面

// 强制从服务器重新加载（忽略缓存）
location.reload(true);

判断当前页面是否属于同源

if (location.origin === 'https://example.com') {
  console.log('当前页面属于同源');
}

获取 URL 中的查询参数

// 获取查询参数 ?name=john&age=25
const params = new URLSearchParams(location.search);
console.log(params.get('name')); // 输出 "john"

相关问题与解答

问题 1：如何判断当前页面是否是某个特定域名？

解答：
可以通过 location.hostname 或 location.host 来判断。

html文档中的location对象属性理解及常见的用法 第1张

if (location.hostname === 'example.com') {
  console.log('当前页面是 example.com 域名');
}

注意：hostname 不包含端口号，而 host 包含端口号。

问题 2：如何通过 URL 锚点（hash）实现页面内部跳转？

解答：
可以通过设置 location.hash 来改变锚点，或者直接在 HTML 中定义锚点链接。

// 跳转到页面内部的 #section1 锚点
location.hash = 'section1';

或者在 HTML 中：

<a href="#section1">跳转到 Section 1
location对象属性
0

相关文章