BOM

最新推荐文章于 2024-07-12 16:27:40 发布

buibuibui_piapia

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量100

点赞数

文章标签： javascript bom

本文链接：https://blog.csdn.net/buibuibui_piapia/article/details/111830744

版权

BOM

1.BOM的概述
BOM(Browser Object Model)是浏览器对象模型，js是通过BOM来操作浏览器
2.window对象
window是浏览器内置顶级对象
在这里插入图片描述
3.window对象上的一些属性
innerWidth 获得浏览器窗口的内容区域的宽度，包含垂直滚动条
innerHeight 获得浏览器窗口的内容区域的高度，包含水平滚动条
scrollTop 纵向滚动高度
scrollLeft 横向滚动条宽度

4.window的一些子对象

location对象
①location对象上记录着当前地址的信息，部分属性如下（具体的我们可以console.log(window.location)打印出来在控制台看）：

②location对象上的两个常用方法

<body>
    <button onclick="fn1()">刷新</button>
    <button onclick="fn2()">跳转</button>
    <script>
        // location具体的各种属性我们可以打印出来在控制台上看
        console.log(window.location)

        function fn1 () {
            // 刷新
            location.reload()
            // 传参数true指的是强制刷新(也就是清除缓存再刷新)
            // location.reload(true)
        }
        function fn2 () {
            // 跳转，参数就是我们要跳转的地址
            location.replace('http://www.baidu.com')
        }
    </script>
</body>

navigator对象
该对象上记录着当前浏览器的信息，部分属性如下：
navigator.appName 获取当前浏览器名称
navigator.appVersion 获取当前浏览器的版本号
navigator.platform 返回当前计算机的操作系统
navigator.userAgent 返回浏览器信息
history对象
该对象上记录着用户的上网记录，一些方法如下：
history.go() 参数可以写任意整数，整数前进，负数后退
history.back() 后退
history.forward() 前进
screen对象
该对象包含客户端屏幕的相关信息，部分属性如下：
window.screen.width 返回当前屏幕宽度（分辨率值）
window.screen.height 返回当前屏幕高度（分辨率值）

5.window下的弹框方法

alert() 警告框

// 打开网站会弹出一个框框，内容是 欢迎帅哥
alert('欢迎帅哥')

prompt() 输入框

var age = prompt("您好，请输入年龄");
if ( age > 18 ) {
    alert('恭喜你，你可以谈恋爱了')
} else {
    alert('好好学习')
}

confirm()确认框

// confirm()确认框，点击确定返回true，点击取消返回false
if (confirm('我帅吗？')) {
    // 点击了确定
    console.log('瞎说什么大实话')
} else {
    // 点击了取消
    console.log('不要脸')
}

6.window中一些常用事件

window.onload
页面加载完成后执行

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        var box = document.getElementById('box')
        console.log(box)  // null  因为我们代码是从上往下执行的，所以获取不到box
    /*  window.onload = function () {
            代码块
        }
        等页面加载完成才执行函数内的代码
    */
        window.onload = function () {
            var box = document.getElementById('box')
            console.log(box)    // <div id="box"></div>
        }
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html

window.onscroll
滚动条滚轮事件

<body>
    <div id="box" style="width: 1000px; height: 1000px;"></div>
    <script>
        window.onscroll = function () {
            // window.scrollTop和window.scrollLeft有兼容性，直接取取不到
            // 下面是兼容写法
            var top = document.documentElement.scrollTop || document.body.scrollTop 
            var left = document.documentElement.scrollLeft || document.body.scrollLeft
            console.log(top,left)
        }
    </script>
</body>

window.onresize
窗口缩放事件

window.onresize = function () {
    // 当窗口大小发生改变时触发
    console.log(window.innerWidth,window,innerHeight)
}

buibuibui_piapia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
BOM

BOM1.什么是BOM？BOM(Browser Object Model)是浏览器对象模型
复制链接

扫一扫

BOM

BOM

“相关推荐”对你有帮助么？