BOM 浏览器窗口尺寸浏览器的弹出层浏览器的地址栏浏览器的历史记录浏览器的版本信息浏览器的常见事件浏览器卷去的高度和宽度

最新推荐文章于 2025-02-06 15:05:08 发布

原创最新推荐文章于 2025-02-06 15:05:08 发布 · 232 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #js #html

大前端专栏收录该内容

48 篇文章

订阅专栏

本文详细介绍了浏览器的多个关键特性，包括浏览器窗口尺寸的innerWidth和innerHeight属性，以及在不同浏览器中滚动条的处理方式。同时，讲解了三种弹出层（alert、confirm、prompt）的使用及其返回值。浏览器地址栏的组成和location对象的属性与方法，如hash、search和reload()。此外，还探讨了浏览器历史记录的back()、forward()和go()方法。最后，讨论了浏览器事件，如onload、onscroll和onresize，以及获取和设置卷去的高度和宽度的方法。这些知识对于理解和操作浏览器行为至关重要。

浏览器窗口尺寸

+ 指的是浏览器可视窗口的尺寸
+ 浏览器可能会出现滚动条
    => 在一般浏览器中，滚动条算浏览器的一部分
    => 在MAC中的safari浏览器上，是不算的 滚动条是隐形的
+ 两个属性
    1. innerWidth
    2. innerHeight
+ 共同点， 包含滚动条的尺寸

浏览器的弹出层

+ 在BOM里面，给我们提供了三个弹出层
+ 可以在浏览器弹出一些信息
    1. alert() 警告框
      -> 只弹出一段提示文本
      -> 只有一个确定按钮
    2. confirm() 选择框
      -> 弹出一段提示文本
      -> 有确定和取消两个按钮
    3. prompt()
      -> 弹出一段提示文本
      -> 弹出一个input输入框
      -> 有确定和取消两个按钮
    语法
        1. alert("提示文本")
        返回值 undefined
        2. confirm("提示文本")
        返回值 确定为true 取消为false
        3. prompt("提示文本")
        返回值 如果用户点击确定，那么就是文本框里的内容
        如果用户点击取消，那么就是null
    共同点
        + 会阻断程序的继续执行
            => 因为js是单线程
            => 弹出弹出层以后，如果用户没有点击按钮表示当前弹出层没有结束
        + 直到用户操作以后，才会向下执行代码

浏览器的地址栏

+ 一个地址包含哪些内容
    => http://www.baidu.com?a=100&b=200#abc
     -> http 传输协议
     -> www.baidu.com 域名
     -> ?a=100&b=200 查询字符串
     -> #abc 哈希值(hash)
+ 地址里面包含的内容的作用
    => 传输协议额 前后端交互的方式
    => 域名 找到一台服务器
    => 查询字符串
      -> 不影响你打开这个页面
      -> 打开这个页面的时候携带的信息
    => 哈希 锚点定位
+ 在window 下有一个成员叫做location
    => location是一个对象，里面存储着和网页地址所有内容相关的信息
    => hash 当前页面的hash值
    => href 是一个读写的属性(当前地址栏地址)
        -> 读 获取当前打开页面的地址
        -> 写 设置当前打开页面的地址
    => search 当前地址中的查询字符串(queryString)
        -> 这个是其他页面跳转到当前页面带来的信息
        -> 我们为了使用,需要把它解析出来
+ reload()
  =>重新加载当前页面 相当于刷新
  *** 不能写在打开页面就能执行的地方

浏览器的历史记录

+ 操作浏览器前进后退
+ window下有一个history 的成员
  => 是一个对象
  => 里面包含了一些操作历史记录的属性和方法
    1. back()
        语法：window.history.back();
        作用：你需要有历史记录 相当于⬅
        前提：你需要有历史记录，不然没得回退
    2. forward()
        语法：window.history.forward();
        作用：前进到下一条历史记录 相当于➡
        前提：你需要回退过后，才可以操作
    3. go()
        语法：window.history.go();
        作用：正整数 表示前进 相当于➡
              0  表示刷新当前页面
              负整数 表示后退 相当于⬅
        前提：你需要回退过后，才可以操作

浏览器的版本信息

+ 用来区分浏览器
    在window下有一个成员叫做 navigator
    navigator 是一个对象，里面存储着浏览器的版本信息
1. userAgent
    => 表示浏览器的版本信息
2. appName
    => 所有浏览器都是统一的名字 netscape
3. platform 表示浏览器操作系统

浏览器的常见事件

1. window.onload = function(){}
    => 页面所有资源加载完毕以后执行
    => 所有资源 音频，视频，图片
    => js前置
2. window.onscroll = function(){}
    => 浏览器滚动条滚动的时候触发
    => 无论是横向还是纵向，只要滚动就触发
        -> 楼层导航
        -> 顶部通栏和顶部按钮的显示
        -> 渐进显示页面
        -> 瀑布流
3. window.onresize = function(){}
    => 浏览器可视窗口改变的时候触发
    => 只要改变就会触发
    => 一般结合innerWidth 和 innerHeight 来判断屏幕尺寸
        -> 移动端： 横屏
        -> 响应式布局： 判断窗口大小

浏览器卷去的高度和宽度

+ 页面比窗口宽或者高的时候
+ 会有一部分是随着滚动隐藏的
+ 我们管上边隐藏叫做卷去的高度
+ 我们管左边隐藏叫做卷去的宽度
    获取卷去的高度：
        文档        html
    1. document.documentElement.scrollTop
    => 使用必须有 DOCTYPE
    2. document.body.scrollTop
    =>必须没有 DOCTYPE
    3. 兼容写法：
        => var scrollTop = document.documentElement.scrollTop || document.body.scroolTop
        => || 可以当作短路表达式使用
            -> 当前面为true时候，直接返回前面的值
            -> 当前面为false时候，直接返回后面的值
    获取卷去的宽度
        1. document.documentElement.scrollLeft
        => 使用必须有 DOCTYPE
        2. document.body.scrollLeft
        =>必须没有 DOCTYPE
        3. 兼容写法：
        => var scrollLeft = document.documentElement.scrollLeft || document.body.scroolLeft
        => || 可以当作短路表达式使用
            -> 当前面为true时候，直接返回前面的值
            -> 当前面为false时候，直接返回后面的值
    浏览器滚动
        1. scrollTo()
            1.1 window.scrollTo(横向最表，纵向坐标)
            => 书写不需要单位，给一个数字即可
            => 如果你传递数字，必须有两个参数，一个参数报错
            1.2 window.scrollTo({
                top: 纵向坐标
                left: 横向坐标
            })
            => 对象里面写几个值无所谓
            => 可以依靠第三个配置项来决定平滑滚动还是瞬间定位
                -> behavior:'smooth','instant'
            不能决定滚动时间

自己完成浏览器回到顶部

1. document.documentElement.scrollLeft
   document.documentElement.scrollTop
    是读写属性 可以获取可以设置 赋值
2. 定时器
    每隔一段时间就执行一次代码
    如果每隔30ms 就让浏览器卷曲高度 - 20
3. 如果鼠标点击或着往下拉都不会停止，为了用户可以拉进度条可以是用一下方法实现
	可以设置一个全局timer 然后再外部获取到一个document.documentElement.scrollTop();若是变大了，说明用户动了滚动条，然后利用timer对象停止定时器。