JavaScript-4.2-BOM 与 DOM-浏览器对象模型的其他对象

最新推荐文章于 2025-08-06 20:38:38 发布

原创最新推荐文章于 2025-08-06 20:38:38 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #screen #location #history #navigator

WEB前端同时被 2 个专栏收录

61 篇文章

订阅专栏

JavaScript

27 篇文章

订阅专栏

本文深入探讨了浏览器对象模型(BOM)的多个核心对象，包括screen、location、history和navigator，详细介绍了每个对象的属性和方法，以及如何在网页开发中有效应用。

JavaScript-4.2-BOM 与 DOM-浏览器对象模型的其他对象

浏览器对象模型的其他对象

浏览器对象模型的其他对象

一：screen：屏幕对象

screen 对象包含有关客户端显示屏幕的信息
四个常用属性
- screen.width：屏幕宽度
- screen.height：屏幕高度
- screen.availWidth：屏幕可用宽度
- screen.availHeight：屏幕可用高度

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>屏幕对象</title>
</head>
<body>
</body>

<script type="text/javascript">
	// screen 对象里面所含的所有信息
	console.log(screen);
	// 屏幕的有效高度
	console.log(screen.availHeight);
</script>

</html>

效果图
在这里插入图片描述

二：location：地址栏对象

location 对象包含有关当前 URL 的信息
存储在 window 对象的 location 属性中
- 表示窗口当前显示的文档的 Web 地址，可通过 window.location 属性访问

window.location="http://www.baidu.com"

完整的 URL 路径：
协议名://主机名(IP地址):端口号/文件路径?传递参数(name1=value1&name2=value2)#锚点
例如：
http://127.0.0.1:8080/JavaScript/index.html?name=jack#top

1、location 常用属性

location 对象的 href 属性存放的是文档的完整 URL
其他属性则分别描述了 URL 各个部分

属性	方法
href	完整路径
protocol	使用的协议（http、https、ftp、file、mailto）
pathname	文件路径
port	端口号
search	从?开始往后的部分
hostname	主机名（IP地址）
host	主机名和端口号
hash	从#开始的锚点

<script type="text/javascript">
	console.log(location);           // 取得浏览器完整的 URL 信息
	console.log(location.href);      // 返回当前完整路径
	console.log(location.protocol);  // 返回协议名   http://
	console.log(location.pathname);  // 返回文件路径
	console.log(location.port);      // 返回端口号     :8080
	console.log(location.search);    // 返回？开头的参数列表
	console.log(location.hostname);  // 返回主机名     127.0.0.1
	console.log(location.host);      // 返回主机名+端口号   127.0.0.1:8080
	console.log(location.hash);      // 返回#开头的锚点
</script>

2、location 常用方法

方法	说明
assign()	加载新的文档
replace	用新的文档替代当前文档
reload	重新加载当前文档

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>location</title>
</head>
<body>
	<button onclick="locationAssign()">assign</button>
	<button onclick="locationReplace()">replace</button>
	<button onclick="locationReload()">reload</button>
</body>
<script type="text/javascript">
	function locationAssign(){
		location.assign("http://www.4399.com");   // 加载新的文档，加载以后，可以后退
	}
	function locationReplace(){
		location.replace("http://www.7k7k.com");   // 使用新的文档替换当前文档，替换以后不能后退
	}
	function locationReload(){
		location.reload(true);    // 重新加载当前页面
	}
</script>
</html>

效果动态图
在这里插入图片描述

reload() 传参与不传参情况的区别
当 reload(true)时，表示从服务器重新加载当前页面
当 reload() 不传参时，表示在本地刷新当前页面

三：history：历史记录对象

history 对象包含用户（在浏览器窗口中）访问过的 URL
history 对象是浏览器历史记录相关的对象

属性或方法	说明
length	返回浏览器历史列表中的 URL 数量
back()	加载 history 列表中的前一个 URL，在浏览器中单击后退按钮相同
forward()	加载 history 列表中下一个 URL，在浏览器中单击按钮向前相同
go()	跳转到浏览历史列表的任意位置

<script type="text/javascript">
	console.log(history.length); // 浏览历史列表个数
	history.back(); //后退
	history.forward(); //前进
	history.go(-1); // 跳转到浏览历史列表的任意位置
</script>

注意
当 history.go() 中传入参数为 1 时，表示前一页，相当于 forward()
当 history.go() 中传入参数为 -1 时，表示后一页，相当于 back()
当 history.go() 中传入参数为 0 时，表示当前页

四：navigator：浏览器配置对象

navigator 对象包含了有关浏览器基本配置的各种信息

属性	说明
appName	产品名称
appVersion	产品版本号
userAgent	用户代理信息
platform	系统平台
plugins	返回一个数组，检测浏览器安装的所有插件
MimeTypes	检查浏览器安装的插件支持的文件类型

plugins 属性，可以查看浏览器安装的所有插件
1.description：插件的描述信息
2.filename：插件在本地磁盘的文件名
3.length：插件的个数
4.name：插件名

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>navigator</title>
</head>
<body>
</body>
<script type="text/javascript">
	console.log(navigator.plugins); // 监测浏览器所安装的各种插件
</script>
</html>

效果动态图
在这里插入图片描述