认识BOM

最新推荐文章于 2024-09-05 16:55:11 发布

一杆梅子酒~

最新推荐文章于 2024-09-05 16:55:11 发布

阅读量72

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_44144755/article/details/123241138

版权

认识BOM (一)

认识 BOM - Browser Object Model 浏览器对象模型

提供给我们一整套操作浏览器相关内容的属性和方法
特点:
- 操作的都是和浏览器这个软件本身相关的内容(滚动条, 地址栏, 标签页, 弹窗, …)
- 所有的 BOM 相关操作, 在各个浏览器表现形式不一样
- BOM 操作一般都是 window.xxxx, 书写的时候, 可以省略 window. 不写

浏览器可视窗口大小

获取浏览器可视窗口的大小

语法:

window.innerWidth
window.innerHeight

注意: 获取的是包含滚动条在内的尺寸(MAC 除外)

 console.log('浏览器可视宽度 : ', window.innerWidth, innerWidth)
    console.log('浏览器可视高度 : ', window.innerHeight, innerHeight)

浏览器的弹出层

提示框

语法：window.alert(文本提示内容)

表现：一个弹框 + 提示文本 + 确定按钮

返回值：没有

确认框

语法：window.confirm(文本提示内容)

表现: 在 alert 的基础上 + 取消按钮

返回值: 一个布尔值

如果点击的是确定, 就是 true

如果点击的是取消, 就是 false
输入框

语法：window.prompt(提示文本内容)

表现：在 confirm 的基础上 + 输入框

返回值:

如果你点击确定, 就是输入的内容(必然是一个字符串类型)

如果你点击取消, 就是 null
三个弹出层的共同点

都会阻断浏览器渲染的继续执行

都会阻断WEBAPI的工作

WEBAPI 的工作内容-> 分析代码

// 1. 提示框
    var res = window.alert('你好 世界')
    console.log(res)

 // 2. 确认框
    var res = window.confirm('你是好人吗 ?')
    console.log(res)

  // 3. 输入框
    var res = window.prompt('你的银行卡密码是多少 ?')
    console.log(res)
    console.log(typeof res)

浏览器的地址栏

相对完整的地址:

eg:https://www.xhl.com:443/a/b/c/login.html?username=admin&password=123456#abc

http(s) 传输协议
www.xhl.com 域名, 对应处一个 ip 地址, 找到互联网世界上的某一台电脑
:443 端口号, http 传输协议默认对应 80, https 传输协议默认对应
/a/b/c/login.html 路径地址
?username=admin&password=123456 查询字符串, 你访问当前文件的时候, 携带给当前文件的信息
#abc 哈希值(hash) 锚点, 进行网页定位使用

就是获取浏览器地址栏内的所有信息
window 下有一个对象叫做 location：里面存储的就是当前地址栏所有的相关信息
href

是一个读写的属性

读: 获取当前页面的完整地址

语法: window.location.href=‘值’

reload()

是一个方法

作用: 重新加载当前页面

语法: window.location.reload()

注意: 不要书写在打开页面就能执行的位置


    // 1-1. href 获取
    console.log(window.location.href)

    // 1-2. href 设置
    btn.onclick = function () {
      window.location.href = 'https://www.baidu.com'
    }


    // 2. reload()
    window.location.reload()
    btn.onclick = function () {
      window.location.reload()
    }

浏览器的标签页

打开新的标签页

语法：window.open(地址)

作用: 打开新的标签页, 开启地址
关闭当前标签页

语法: window.close()

作用: 关闭当前标签页

 on.onclick = function () {
      // 1. 开启新的标签页
      window.open('https://www.baidu.com')
    }

    off.onclick = function () {
      // 2. 关闭标签页
      window.close('https://www.baidu.com')
    }

浏览器卷去的尺寸(浏览器滚动条定位)

卷去的高度

语法:

document.documentElement.scrollTop

有 DOCTYPE 标签的时候, 能获取到尺寸

document.body.scrollTop

没有 DOCTYPE 标签的时候, 能获取到尺寸

使用 || 的短路运算

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
卷去的宽度

语法:

document.documentElement.scrollLeft

有 DOCTYPE 标签的时候, 能获取到尺寸

document.body.scrollLeft

没有 DOCTYPE 标签的时候, 能获取到尺寸

兼容:使用 || 的短路运算->

var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft

// 1. 浏览器卷去的高度
    // console.log('卷去的高度 : ', document.documentElement.scrollTop)
    // console.log('卷去的高度 : ', document.body.scrollTop)
    // var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    // console.log(scrollTop)


window.onscroll=function(){
var       scrollTop=document.documentElement.scrollTop||document.body.scrollTop
console.log(scrollTop)
}//放在函数才可以持续刷新

// 2. 浏览器卷去的宽度
    // console.log('卷去的宽度 : ', document.documentElement.scrollLeft)
    // console.log('卷去的宽度 : ', document.body.scrollLeft)
    // var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
    // console.log(scrollLeft)

浏览器的常见事件

load

加载事件

时机: 当页面所有外部资源(html, css, js, 图片, 视音频等) 全部加载完毕后触发

一般:

当你把 js 代码书写在 head 标签内的时候, 并且操作了页面元素

需要加一个 window.onload 事件

<head>
  <style>
    body {
      width: 3000px;
      height: 3000px;
    }
  </style>
  <script>
    // 在这里加载代码的时候, 下面的 html 结构还没有加载呢
    // console.log(btn)

    // window.onload = function () {
    //   // 这里的代码执行的时候, 是页面的所有资源加载完毕
    //   // 就包括后面的 html 结构加载完毕以后, 才会执行这个代码
    //   console.log(btn)
    // }
  </script>
</head>

注意:

因为这种 on 的形式绑定的事件, 只能绑定一个事件处理函数

如果你写了两个事件处理函数, 那么只能执行后面一个

resize

尺寸改变事件

时机: 当页面可视窗口尺寸改变的时候, 触发, 随时改变随时触发
scroll

滚动事件

时机: 当页面滚动条滚动的时候触发, 随时改变随时触发

 // 1. load
    // window.onload = function () {
    //   console.log('页面全部加载完毕了')
    // }

    // 2. resize
    // window.onresize = function () {
      // console.log('尺寸改变了')
      // if (window.innerWidth >= 768) {
      //   alert('竖屏体验更佳 ^_^')
      // }
    // }

    // 3. scroll
    window.onscroll = function () {
      // console.log('滚')
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      console.log(scrollTop)
    }

浏览器滚动到

语法: window.scrollTo()
两种参数方式

第一种: 传递数字: window.scrollTo(x, y)

-> x 表示横向位置

-> y 表示纵向位置

注意: 必须传递两个参数, 一个报错

特点: 只能瞬间定位, 不能平滑滚动

第二种: 传递对象

window.scrollTo({
              top: yyy,
              left: xxx,
              behavior: 'smooth'
            })

默认是瞬间定位, 需要一个 key 叫做 behavior 来决定是平滑滚动


    btn.onclick = function () {

      // 1. 传递数字
      // window.scrollTo(100, 1560)

      // 2. 传递对象
      window.scrollTo({
        top: 100,
        left: 982,
        behavior: 'smooth'
      })
    }

一杆梅子酒~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
认识BOM

认识BOM (一)认识 BOM - Browser Object Model 浏览器对象模型提供给我们一整套操作浏览器相关内容的属性和方法特点:操作的都是和浏览器这个软件本身相关的内容(滚动条, 地址栏, 标签页, 弹窗, …)所有的 BOM 相关操作, 在各个浏览器表现形式不一样BOM 操作一般都是 window.xxxx, 书写的时候, 可以省略 window. 不写浏览器可视窗口大小获取浏览器可视窗口的大小语法:window.innerWidthwindow.inn
复制链接

扫一扫