JavaScript (八) -- JavaScript BOM

普雅^0^雷蒙达

已于 2023-05-07 16:43:39 修改

阅读量630

点赞数 1

分类专栏： # JavaScript 文章标签： javascript 前端开发语言

于 2023-05-07 16:38:59 首次发布

本文链接：https://blog.csdn.net/PUYALEI/article/details/130539498

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1. JavaScript BOM的概述：

2. Window 对象（浏览器窗口对象）

2.4.2 history对象属性（只有1个属性）

2.5 screen对象常用方法：

2.6 navigator对象常用方法：

1. JavaScript BOM的概述：

BOM(Browser Object Model)：浏览器对象模型。
提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。
把[浏览器]当作一个[对象]来看待、BOM的顶级对象是window、BOM学习的是浏览器窗口交互的一些对象、BOM是浏览器厂商在各自浏览器上定义的，兼容性较差。

BOM中共有五大对象：

Window 对象：浏览器窗口对象。
Navigator：浏览器对象。
Screen：浏览器所处客户端的显示器屏幕对象。
History：浏览器当前窗口的访问历史记录对象。
Location：浏览器当前窗口的地址栏对象。

注：window对象是浏览器的顶级对象，具有双重角色。

是JS访问浏览器窗口的一个接口。
是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法。在调用的时候可以省略window。

2. Window 对象（浏览器窗口对象）

2.1 Window 对象的调用方式：

不同于一般的对象，BOM 中的 Window 对象不需要创建就可以直接使用，使用其中的方法直接调用即可，类似于我们已知的静态方法，其语法格式：

window.方法名();

示例演示（弹出一个警告框 alert）：

window.alert("window对象警告框弹出！");

由于在客户端 JavaScript 中，window 对象是全局对象，所有的表达式都在当前的环境中计算。要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。

即，使用 window 对象中的方法可以不用带对象名，直接写方法名即可：
alert("window对象警告框弹出！");

2.2 Window 对象常用方法：

因为 Window 对象是BOM的顶级对象，故抽出来独立学习：

JavaScript (九) -- JavaScript BOM之 Window 对象常用方法

2.3 Location对象常用方法：

JavaScript Location对象包含有关当前文档位置的信息。它可以用来获取或设置文档的URL、域名、路径和片段等信息。

方法名	说明
assign()	加载新的文档。可以跳转页面（也称为重定向页面）会记录历史。
reload()	重新加载当前文档。如果参数为true强制刷新ctrl +f5。
replace()	用新文档替换当前文档。因为不能记录历史，所以不能后退页面。

<body>
    
    <input type="button" value="assign" id="assign">
    <input type="button" value="reload" id="reload">
    <input type="button" value="replace" id="replace">

</body>

<script>
    /**
     * 加载新文档,参数为URL地址，会产生历史记录
     */
   
    document.getElementById("assign").onclick = function(){
        location.assign("http://www.baidu.com");
    } 
    /**
     * 重新加载文档，参数为一个布尔值，默认为false
     * 1.如该方法没有设定参数值或设定为false，那该方法会使用浏览器缓存来重新加载页面（浏览器默认刷新方式）
     * 2.如该方法参数值为true，那么该方法会无条件向服务器重新下载该文档并重新加载
     * 
     */ 
    document.getElementById("reload").onclick = function(){
        location.reload(true);
    }
    

    // /**
    //  * 替换当前文档，和 assign 方法类似 
    //  * 但是不会产生历史记录，也就是无法通过后退键返回上一个页面
    //  */
    document.getElementById("replace").onclick = function(){
        location.replace("http://www.baidu.com");
    }
    
</script>

location 的属性如下：

<body>
	<div></div>
	<script>
		var div = document.querySelector('div');
		var timer = 5;
		setInterval(function(){
			if(timer == 0){
				location.href = 'http://www.itcast.cn';
			}else{
				div.innerHTML = '您将在' + timer + '秒钟后跳转到首页';
				timer--;
			}
		},1000);
	</script>
</body>

这是一个不点击自动跳转的js功能。

2.4 history对象常用方法：

JavaScript history对象保存了浏览器窗口访问过的所有页面的信息，它可以用来向前或向后在浏览历史中导航。

2.4.1 history对象常用方法

方法名	说明
back()	加载当前窗口 history 列表中的前一个 URL。
forward()	加载当前窗口 history 列表中的下一个 URL。
go(-1)	向后导航到上一个页面。
go(1)	向前导航到下一个页面。
pushState(stateObj, title, url)	向浏览历史添加一条新的记录。
replaceState(stateObj, title, url)	用新的数据更新当前历史记录。

<body>
    <a href="http://www.baidu.com">打开一个页面</a>
    <input type="button" value="goForward前进" onclick="goForward()">
    <input type="button" value="goBack后退" onclick="goBack()">
    <input type="button" value="go去后一个页面" onclick="go()">
</body>
<script>

    /**
     * forward()方法
     * 加载当前窗口历史列表的前一个页面
     * 类似于浏览器中的前进按钮
     * 
     */ 
    function goForward() {
        history.forward();
    }

    /**
     * back()方法
     * 加载当前窗口历史列表的后一个页面
     * 类似于浏览器中的后退按钮
    */
    function goBack() {
        history.back();
    }
    
    /**
     * go()方法
     * 加载当前窗口历史列表的一个具体页面
     * 参数可以为一个URL或者一个数字，数字代表要访问的URL在历史记录的相对位置
     */ 
    function go() {
        //-1表示向后一个页面
        history.go(-1);
    }
</script>

<script>
 // 向后导航到上一个页面
history.back();
 // 向前导航到下一个页面
history.forward();
 // 向后导航到上一个页面
history.go(-1);
 // 向前导航到下一个页面
history.go(1);
 // 添加一条新的历史记录
history.pushState({data: "example"}, "Example Title", "http://example.com/new-page");
 // 更新当前历史记录
history.replaceState({data: "new-data"}, "New Title", "http://example.com/current-page");
</script>

在这个例子中，我们分别使用 history.back() 和 history.forward() 向后和向前导航到浏览历史中的前一个页面和后一个页面。接着，我们使用 history.go(-1) 和 history.go(1) 向后和向前导航到浏览历史中的前一个和后一个页面。然后我们使用 history.pushState() 将一条新的历史记录添加到浏览器历史中，并使用 history.replaceState() 更新当前的历史记录。这些方法可以帮助我们在Web应用程序中实现浏览器历史记录管理的功能，使用户能够更方便地导航到之前访问的页面。

2.4.2 history对象属性（只有1个属性）

方法名	说明
length	返回浏览器历史列表中的 URL 数量。

注：Internet Explorer和Opera从0开始，而Firefox、Chrome和Safari从1开始。

	<body>
    <input type="button" value="获取历史记录数量" onclick="getLength()">
    </body>

    <script>
	/**
     *length属性
     * 显示当前窗口历史记录数量
     */ 
    function getLength() {
        alert(history.length);
    }
    <script>

2.5 screen对象常用方法：

JavaScript中的 screen 对象提供了有关用户屏幕的信息，如屏幕分辨率、可显示区域、颜色深度、分辨率比例等。它可以帮助我们调整我们的Web应用程序设计或确定我们应该使用哪种技术来呈现媒体内容。

方法名	说明
width	屏幕的宽度。（单位：像素）
height	屏幕的高度。（单位：像素）
availWidth	屏幕的可用宽度，不包括任务栏等。（单位：像素）
availHeight	屏幕的可用高度，不包括任务栏等。（单位：像素）
colorDepth	屏幕的颜色深度，即每个像素使用多少位来表示颜色。
pixelDepth	屏幕的像素深度，即每个像素使用多少位来表示图像。
orientation.angle	屏幕的方向角度，返回90、0或-90。
orientation.type	屏幕的方向类型，返回“portrait-primary”、“landscape-primary”、“portrait-secondary”或“landscape-secondary”四种类型之一。
lockOrientation(orientation)	锁定屏幕的方向，即强制横屏或竖屏，该方法使用的不是很广泛。
unlockOrientation()	解除屏幕方向的锁定状态。

实例演示：

使用了 screen.availWidth 和 screen.availHeight 属性获取设备屏幕的可用宽度和高度，并根据大小修改网页的样式：

<!DOCTYPE html>
<html>
<head>
	<title>Screen Size Example</title>
	<style>
		body {
			font-size: 30px;
			text-align: center;
			color: white;
			background-color: gray;
			padding: 10px;
		}
		.small {
			background-color: blue;
		}
		.medium {
			background-color: green;
		}
		.large {
			background-color: yellow;
		}
	</style>
</head>
<body>
	<h1>JavaScript Screen Size Example</h1>
	<p>Screen Size: <span id="size"></span></p>
	<script>
		function updateSize() {
			var width = screen.availWidth;
			var height = screen.availHeight;
			var size = width * height;
			var sizeClass = "medium";
			if (size < 500000) {
				sizeClass = "small";
			} else if (size > 1000000) {
				sizeClass = "large";
			}
			document.getElementById("size").innerHTML = width + " x " + height;
			document.body.classList = [sizeClass];
		}
		window.onload = updateSize;
		window.onresize = updateSize;
	</script>
</body>
</html>

在这个例子中，我们定义了一些CSS样式，用于根据屏幕大小改变网页的背景颜色。然后，我们使用JavaScript的 screen.availWidth 和 screen.availHeight 属性获取当前设备的屏幕可用宽度和高度，并计算出屏幕大小。我们通过比较屏幕大小和预设的阈值，将不同的样式类添加到网页的body元素中，以便根据大小修改样式。在窗口加载和大小改变时，我们调用 updateSize() 方法更新大小信息和样式。可以尝试在不同大小的屏幕上查看这个例子，看看它是如何改变背景色的。

小提示：

document.body.classList的解释：

document.body.classList 用于获取或设置文档中body元素的class属性值，是一个只读的DOMTokenList对象。通过它，我们可以添加、删除或替换元素的class属性值。例如，如果我们有一个body元素 <body class="wrapper"> ，我们可以使用classList对象添加或删除class值，如下所示：
// 添加class
document.body.classList.add("active");
 // 删除class
document.body.classList.remove("wrapper");
在这个例子中，我们首先使用 add() 方法将 "active" 类添加到body元素中。然后，我们使用 remove() 方法删除 "wrapper" 类。此时，body元素的class属性会变为 <body class="active"> 。

2.6 navigator对象常用方法：

JavaScript中的 navigator 对象提供了有关浏览器的信息。通过 navigator 对象，我们可以识别正在运行的浏览器及其版本、浏览器是否启用了Cookie、操作系统等信息。

方法名	说明
appName	浏览器名称；注意：“Netscape” 是 IE11、Chrome、Firefox 以及 Safari 的应用程序名称的统称。
appVersion	返回浏览器版本信息的只读属性。
appCodeName	返回浏览器的应用程序代码名称。
language	返回当前浏览器的语言，如"en-US"或"zh-CN"等。
platform	操作系统类型。
userAgent	返回一个包含浏览器标识符字符串的只读属性。浏览器设定的User-Agent字符串。
cookieEnabled	返回 true，如果 cookie 已启用，否则返回 false。
product	返回浏览器引擎的产品名称。
platform	返回浏览器平台（操作系统）。如"Windows"或"MacOS"等。
onLine	返回一个布尔值，指示浏览器是否联网。
javaEnabled()	方法返回 true，如果 Java 已启用。

如果对你有帮助，请帮我点一下赞，我才有动力继续创作，谢谢！

普雅^0^雷蒙达

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript (八) -- JavaScript BOM

BOM(Browser Object Model)：浏览器对象模型。提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。把[浏览器]当作一个[对象]来看待、BOM的顶级对象是window、BOM学习的是浏览器窗口交互的一些对象、BOM是浏览器厂商在各自浏览器上定义的，兼容性较差。Window 对象：浏览器窗口对象。浏览器对象。Screen：浏览器所处客户端的显示器屏幕对象。History：浏览器当前窗口的。
复制链接

扫一扫