javascript初探（五）------ BOM

chuck-Gemini

已于 2023-03-13 22:38:14 修改

阅读量181

点赞数

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

于 2021-03-06 18:46:01 首次发布

本文链接：https://blog.csdn.net/chucksun0426/article/details/114439383

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、概述

BOM：浏览器对象模型，提供了方法和属性，让开发者可以通过js对浏览器进行操作
包含：window对象、navigator对象、location对象、history对象、screen对象

二、window对象

window对象：代表整个浏览器的窗口，也是网页的全局对象，可以省略window.这个前缀

window对象属性

属性	描述
document	对 Document 对象的只读引用
innerHeight	窗口的文档显示区的高度，innerWidth宽度
localStorage	在浏览器中存储 key/value 对。没有过期时间，遵循同源策略
sessionStorage	在浏览器中存储 key/value 对。在关闭窗口或标签页之后将会删除这些数据，遵循同源策略

window对象方法

方法	描述
alert()	警告框
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框
prompt()	显示可提示用户输入的对话框
setInterval()	定时器：按照指定的周期（以毫秒计）重复调用函数或计算表达式
clearInterval()	取消由 setInterval() 设置的 timeout
setTimeout()	延时器：在指定的毫秒数后调用函数或计算表达式，参数同定时器
clearTimeout()	取消由 setTimeout() 方法设置的 timeout
scrollBy()	相对滚动，按照指定的像素值来滚动内容
scrollTo()	绝对滚动，把内容滚动到指定的坐标
getComputedStyle()	获取指定元素的 CSS 样式
print()	调出打印对话框

页面自动向下滚动

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script>
        window.onload = function() {
            const btn = document.querySelector("button");
            btn.addEventListener("click", scrollWindow);
			
			// 定义个全局定时器序号变量，结合类
			let timer;
            function scrollWindow() {
            	// 打开一个定时器之前，先关闭之前打开的定时器，
            	// 防止一个元素节点叠加多个定时器，非法值不会报错
                clearInterval(timer);
                // 存储循环次数
                let i = 0;
                // 定数器参数一：回调函数（此处为匿名函数）
                timer = setInterval(() => {
                    // 滚动像素数，第一个参数x，第二个y
                    window.scrollBy(0, 10);
                    // 回调函数循环4次关闭
                    if (i > 4) {
                        // 关闭定时器，否则会一直持续到关闭页面
                        clearInterval(timer);
                        // 动画：此处可以再加含定时器的函数，可由外部传入，例如改变元素节点样式
                    }
                // 每次调用此函数，i加一
                i++;
                // 定时器参数二：循环间隔为1000毫秒
                }, 1000);
            }
        }
    </script>
</head>

<body>
	<!-- 按钮开启定时器 -->
    <button onclick="scrollWindow()">启动滚动</button>
    <p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
	<!-- 写足够多个，知道把页面右边的滚动条写出来 -->

    <p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

</body>

</html>

定时器：可以对同一个元素设置多个，丢失了定时器的timer则丢失了关闭定时器的句柄，只能关闭页面来关闭定时器

三、navigator对象

功能：用来区分浏览器（chrome、Firefox、IE），基本被废弃了

区分浏览器

window.onload = function() {
    let ua = navigator.userAgent;
    if (/firefox/i.test(ua)) {
        alert("火狐浏览器");
    } else if (/chrome/i.test(ua)) {
        alert("chrome浏览器");
    } else if (/msie/i.test(ua)) {
        alert("IE浏览器");
    } else if ("ActiveXObject" in window) {
        alert("IE11浏览器");
    }
}

四、location对象

功能：当前浏览器地址栏信息

地址操作

// 在当前页面内触发页面跳转，生成历史记录
location.assign("http://baidu.com");
// 功能同上，不生成历史记录
location.replace("http://baidu.com");

// 在当前页面内触发页面跳转，相对路径,生成历史记录
location.assign("bubble.html");
// 功能同上，不生成历史记录
location.replace("bubble.html");

// 刷新页面（使用缓存），默认参数为false，可不填
// 若参数为true，浏览器重新向服务器请求页面，ctrl+F5
location.reload();

五、history对象

功能：代表浏览器历史记录，控制历史记录跳转

操作浏览记录

// 相当于浏览器的后退按钮，等同于history.go(-1);
history.back();
// 相当于浏览器的前进按钮，等同于history.go(1);
history.forward();
// 本次打开浏览器的历史记录数量
let num = history.length;
// 前进一个
history.go(1);
// 后退一个
history.go(-1);

六、screen对象

功能：用户显示器相关信息，移动端用的多

上一篇：javascript初探（四）------事件对象
 下一篇：javascript初探（六）------TypeScript浅尝

chuck-Gemini

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript初探（五）------ BOM

目录一、概述二、window对象三、navigator对象四、location对象五、history对象六、screen对象一、概述BOM：浏览器对象模型，提供了方法和属性，让开发者可以通过js对浏览器进行操作包含：window对象、navigator对象、location对象、history对象、screen对象二、window对象window对象：代表整个浏览器的窗口，也是网页的全局对象，可以省略window.这个前缀window对象属性属性描述document对
复制链接

扫一扫