window对象的属性里和访问相关的属性你知道几个?

本文详细介绍了JavaScript中的window对象中与访问相关的三个属性:location、history和navigator。location对象用于获取和设置当前页面URL,包括常用属性如protocol、hostname、href等,以及assign()和reload()方法。history对象涉及浏览器历史记录,包括back()、forward()和go()方法。navigator对象提供浏览器相关信息,如userAgent属性用于识别浏览器类型,还有其它如cookieEnabled、onLine等属性。了解这些属性和方法有助于提升前端开发技能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

window对象的属性里,有三个属性和访问相关:

location、history、navigator。

这三个属性也是对象,我们在使用它们的时候,不用加window前缀。

  • location

location对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

对于location对象的方法和属性,我们可以在浏览器的控制台里打印出来。如下图:

端口80:

在这里插入图片描述

端口3001:

在这里插入图片描述

这些属性和方法也是非常常用的。

  • location属性

提示:如果端口是80或者443,浏览器不会显示端口号。

origin:返回URL的协议,主机名和端口号。
protocol:返回协议。
host:返回主机名和端口号。
hostname:返回主机名。
port:返回端口号。
pathname:返回url的路径字符串。
search:也叫查询字符串,返回url中?以及之后的字符串,也就是参数字符串。
hash:返回url中#及之后的字符串,也就是锚点字符串。
href:返回完整的url。它是可写的,如果给href赋值,会跳转到新的页面。比如:

window.location.href = "http://localhost/test.html";

会跳转到test.html页面,我们经常用href进行页面跳转。

  • location方法

assign(url):加载新的url。它和href属性功能是一样的。比如:

window.location.assign("http://localhost/test.html");
window.location.href = "http://localhost/test.html";

这两句都是跳转test页面。

replace(url):加载新的url。它和assign及href的区别是:

replace加载的页面不会保存在浏览器历史中,无法通过返回按钮返回到该页面。

reload(Boolean):重新加载当前页面。参数是一个可选的布尔值,默认是false,表示从缓存中读取,设置为true,表示强制从服务器重新获取。比如:

window.location.reload(true);
  • history

history对象包含用户在浏览器窗口中访问过的 URL。

length属性:返回浏览器历史列表中的 URL 数量。
back()方法:加载 history 列表中的前一个 URL。相当于点击浏览器的后退按钮。
forward()方法:加载 history 列表中的下一个 URL。相当于点击浏览器的前进按钮。

go(number|URL)方法:加载 history 列表中的某个具体页面。

参数可以是数字也可以是url。

url必须是浏览器历史里的url。
数字是url在历史列表中对应的位置。可以是负数,可以是正数。负数是后退,正数是前进。比如:

window.history.go(-1); //相当于history.back()
window.history.go(1); //相当于history.forward()
  • navigator

navigator对象包含有关浏览器的信息。

navigator对象最常用的属性是userAgent,也就是我们常常说的ua。

userAgent属性:返回由浏览器发送到服务器的用户代理报头(user-agent header)。它里面有很多浏览器的相关信息,例如:

navigator.userAgent;//输出Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36

我们通常用userAgent里的信息来辨别浏览器类型。
除了userAgent属性,还有一些其他属性,我们来简单介绍一下:

appCodeName属性:返回浏览器的代码名。比如:

navigator.appCodeName; //输出Mozilla

在所有以 Netscape 代码为基础的浏览器中,它的值是 “Mozilla”。为了兼容起见,在 Microsoft 的浏览器中,它的值也是 “Mozilla”。

appName属性:返回浏览器的名称。比如:

navigator.appName; //输出Netscape

在基于 Netscape 的浏览器中,这个属性的值是 “Netscape”。
Chrome、Firefox 以及 Safari都是基于Netscape 的浏览器。
在 IE 中,这个属性的值是 “Microsoft Internet Explorer”。

其他浏览器可以正确地表示自己或者伪装成其他的浏览器以达到兼容性。

appVersion属性:返回浏览器的平台和版本信息。比如:

navigator.appVersion; //输出5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36

platform属性:返回运行浏览器的操作系统平台。比如:

navigator.platform; //输出MacIntel

cookieEnabled属性:返回浏览器中是否启用 cookie 的布尔值。true表示启用了cookie,false表示禁用了cookie。比如:

navigator.cookieEnabled; //输出true

product属性:返回浏览器引擎的产品名称。比如:

navigator.product; //输出Gecko

大多数浏览器都是返回Gecko。

language属性:返回浏览器语言。比如:

navigator.language; //输出zh-CN

onLine属性:返回浏览器是否在线的布尔值。true表示浏览器在线,false表示不在线。比如:

navigator.onLine; //输出true

在 IE 4+ 中,用户可以在浏览器中选择脱机工作的状态。当脱机工作被选后,系统就进入了脱机状态,内容将从缓存进行读取。

javaEnabled()方法:返回布尔值,表示是否支持并启用了java。如果是,返回true,否则返回false。比如:

navigator.javaEnabled(); //输出false

如果想看更过关于前端知识的文章,欢迎微信搜索公众号:“刘小妞的栖息地”或者识别下图的二维码查看更多的文章,感谢大家的支持。

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值