浏览器的知识

2023-05-16

1.浏览器可视窗口大小

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

+ 语法:

=> window.innerWidth

=> window.innerHeight

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

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

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

2.浏览器的弹出层

1. 提示框

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

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

+ 返回值: 没有

2. 确认框

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

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

+ 返回值: 一个布尔值

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

=> 如果点击的是取消, 就是 false

3. 输入框

+ 语法: 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)

// setTimeout(function () { console.log(123) }, 5000)

// setTimeout(function () { console.log(200) }, 200)

// setTimeout(function () { console.log(100) }, 100)

3.浏览器的地址栏

+ 相对完整的地址

=> 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 传输协议默认对应 443

=> /a/b/c/login.html 路径地址

=> ?username=admin&password=123456 查询字符串, 你访问当前文件的时候, 携带给当前文件的信息

=> #abc 哈希值(hash) 锚点, 进行网页定位使用

+ 就是获取浏览器地址栏内的所有信息

+ window 下有一个对象叫做 location

=> 里面存储的就是当前地址栏所有的相关信息

=> {

hash: "#aaa"

host: "www.baidu.com:443"

hostname: "www.baidu.com"

href: "https://www.baidu.com/?a=100&b=200#aaa"

origin: "https://www.baidu.com:443"

pathname: "/index.html"

port: "443"

protocol: "https:"

search: "?a=100&b=200"

}

1. href

+ 是一个读写的属性

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

-> 语法: window.location.href

=> 写: 设置当前页面的浏览器地址

-> 语法: window.location.href = '值'

2. 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()

// }

4.浏览器的标签页

1. 打开新的标签页

+ 语法: window.open(地址)

+ 作用: 打开新的标签页, 开启地址

2. 关闭当前标签页

+ 语法: window.close()

+ 作用: 关闭当前标签页

on.onclick = function () {

// 1. 开启新的标签页

window.open('https://www.baidu.com')

}

off.onclick = function () {

// 2. 关闭标签页

window.close('https://www.baidu.com')

}

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

卷去的高度

+ 语法:

=> 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)

// 2. 浏览器卷去的宽度

// console.log('卷去的宽度 : ', document.documentElement.scrollLeft)

// console.log('卷去的宽度 : ', document.body.scrollLeft)

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

console.log(scrollLeft)

6.浏览器的常见事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      width: 3000px;
      height: 3000px;
    }
  </style>
  <script>
    // 在这里加载代码的时候, 下面的 html 结构还没有加载呢
    // console.log(btn)

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

  <!-- <img src="https://img0.baidu.com/it/u=2346456477,2040645892&fm=26&fmt=auto" alt="">
  <img src="https://img0.baidu.com/it/u=2948795774,2180825126&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
  <img src="https://img1.baidu.com/it/u=2895143935,2518194020&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""> -->

  <button id="btn">按钮</button>


  <script>
    /*
      浏览器的常见事件
        1. load
          => 加载事件
          => 时机: 当页面所有外部资源(html, css, js, 图片, 视音频等) 全部加载完毕后触发
          => 一般:
            -> 当你把 js 代码书写在 head 标签内的时候, 并且操作了页面元素
            -> 需要加一个 window.onload 事件
          => 注意:
            -> 因为这种 on 的形式绑定的事件, 只能绑定一个事件处理函数
            -> 如果你写了两个事件处理函数, 那么只能执行后面一个
        2. resize
          => 尺寸改变事件
          => 时机: 当页面可视窗口尺寸改变的时候, 触发, 随时改变随时触发
        3. 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)
    }


  </script>
</body>
</html>

7.浏览器滚动到

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      width: 3000px;
      height: 3000px;
    }

    #btn {
      position: fixed;
      right: 50px;
      bottom: 50px;
    }
  </style>
</head>
<body>

  <button id="btn">滚</button>

  <script>
    /*
      浏览器滚动到
        + 语法: 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'
      })




    }

  </script>
</body>
</html>

8.浏览器的本地存储

+ 浏览器本地存储的数据分成几种

1. cookie

2. localStorage

3. sessionStorage

存储特点

1. cookie 是按照域名存储的

=> 本地打开的页面是无法存储 cookie 的必须在服务器打开

=> 哪一个域名存储的 cookie 哪一个域名使用

2. cookie 的存储大小

=> 4KB 左右

=> 50条左右

3. cookie 的存储都是字符串, 有自己的固定格式

=> 'key=value; key2=value2; key3=value3'

4. cookie 的存储是有时效性的

=> 默认时效性是会话级别

=> 我们可以手动设置过期时间

5. cookie 的通讯相关

=> 在前后端交互的时候

=> 会在每一次和后端的 "对话" 中自动携带 cookie

6. 操作权限

=> 前后端都可以操作 cookie

操作语法:

+ document.cookie

服务器打开

+ 借助 vscode 启动临时服务器打开页面

+ 下载一个插件 live server

+ 打开页面的时候

=> 点击 open with live server

设置一条基本的 cookie

+ 语法: document.cookie = 'key=value'

+ 注意: 一次只能设置一条, 设置的默认就是会话级别的时效性

// 设置了一条叫做 a 的 cookie, 值是 100

// document.cookie = 'a=100'

设置一条带有过期时间 cookie

+ 语法: document.cookie = 'key=value;expires=' + 时间对象

cookie 采用的时间规范

+ 不管你给他的是什么时间节点, 他都当做世界标准时间使用

+ 我们给到的是 11:35, cookie 会把 11:35 当做世界标准时间使用

+ 该条 cookie 会在世界标准时间 11:35 分过期

+ 因为我们时区的问题, 世界标准时间的 11:35 分, 就是我们的 19:35 分

+ 该条 cookie 会在今天晚上 19:35 分过期被自动删除

设置一个 30s 以后过期的 cookie

+ 拿到当前时间, 减去 8 个小时

+ 在向后推进 30s

// var time = new Date('2022-3-2 11:35:30')

// document.cookie = 'a=100;expires=' + time

// 1. 拿到当前时间

// var time = new Date()

// 2. 转换成时间戳 - 8个小时的毫秒数

// var r1 = time.getTime()

// var r2 = r1 - 1000 * 60 * 60 * 8 + 1000 * 30

// 3. 使用调整好的时间戳直接定位时间节点

// time.setTime(r2)

// console.log(time)

// document.cookie = 'a=100;expires=' + time

// 封装设置 cookie

// 讨论: 几个参数 ? 分别是什么 ?

// 第一个: key

// 第二个: value

// 第三个: 过期时间

// 过期时间应该用一个什么数据类型 ?

// 给一个数值类型

// function setCookie(key, value, expires) {

// // 1. 判断 expires 参数是否传递了

// if (!expires) {

// // 直接设置

// document.cookie = key + '=' + value

// return

// }

// // 代码能执行到这里, 说明 expires 有值

// // 2. 设置时间对象

// var time = new Date()

// time.setTime(time.getTime() - 1000 * 60 * 60 * 8 + 1000 * expires)

// // 设置 cookie

// document.cookie = `${ key }=${ value };expires=${ time }`

// }

function setCookie(key, value, expires) {

// 1. 判断 expires 参数是否传递了

if (expires) {

// 2. 设置时间对象

var time = new Date()

time.setTime(time.getTime() - 1000 * 60 * 60 * 8 + 1000 * expires)

}

document.cookie = `${ key }=${ value };expires=${ time }`

}

// 将来我们使用的时候

setCookie('a', 100, 30)

setCookie('b', 200, 30)

获取 cookie

+ 语法: document.cookie

console.log(document.cookie)

// 封装获取 cookie

getCookie()

function getCookie() {

// 1. 拿到 cookie

var cookie = document.cookie

// 2. 按照 ';' 切割成数组以后遍历

var obj = {}

cookie.split('; ').forEach(function (item) {

// 在循环内 item 就是每一条 cookie

// 3. 对 item 进行再次切割

var t = item.split('=')

// 4. 插入对象

obj[ t[0] ] = t[1]

})

// 5. 把 obj 当做返回值

return obj

}

var res = getCookie()

console.log(res)

delCookie('a')

浏览器的本地存储 - storage

存储特点

1. 前后端操作

=> 只能由前端操作

=> 任何后端语言不能操作

2. 存储位置

=> 浏览器本身

3. 通讯相关

=> 不能自动携带

4. 存储大小

=> 20M 左右

5. 时效性是不可设置的

=> localStroage 是永久存储

=> sessionStorage 是会话存储

6. 存储格式

=> 按照键值对存储, 但是只能存储字符串类型的数据

=> 如果你存储的是其他类型的数据, 会自动帮你转换成字符串存储

7. 操作 API

=> 一套自己完整的操作语法

面试题

+ 解释一下 cookie localStorage sessionStorage session 的区别

+ session 是一个后端的存储空间

+ cookie / localStorage / sessionStorage 的区别

1. 存储大小

=> cookie: 4KB 左右

=> stroage: 20M 左右

2. 通讯相关

=> cookie: 随请求自动携带

=> storage: 不会自动携带

3. 操作相关

=> cookie: 操作复杂, 没有 api, 前后端都可以操作

=> storage: 操作简单, 有 api, 只能前端操作

4. 存储格式

=> cookie: 字符串格式

=> storage: 键值对

5. 时效相关

=> cookie: 默认是会话级别, 可以手动设置

=> storage: localStorage 就是永久, sessionStorage 就是会话, 不可更改

+ localStorage 和 sessionStorage 的区别

1. 跨页面通讯能力

=> lcoalStorage 随便跨页面

=> sessionStorage 只能是本页面跳转可以通讯

2. 时效性

=> localStorage 就是永久

=> sessionStorage 就是会话

+ localStorage 和 sessionStorage 的共同点

=> 不能存储其他数据类型, 只能存储字符串类型数据

=> 如果一定要存储其他数据类型, 转换成 json 格式存储

var obj = { name: "jack" }

var obj2 = { name: 'rose' }

localStorage

// 1. 设置

// 语法: window.lcoalStorage.setItem(key, value)

// window.localStorage.setItem('a', 100)

// window.localStorage.setItem('b', 200)

// window.localStorage.setItem('c', 300)

// 2. 删除

// 语法: window.localStorage.removeItem(key)

// window.localStorage.removeItem('a')

// 3. 获取

// 语法: window.lcoalStorage.getItem(key)

// 得到: 如果有这个 key, 那么就是对应的值, 如果没有这个 key, 那么就是 null

// console.log(window.localStorage.getItem('a'))

// console.log(window.localStorage.getItem('b'))

// 4. 清除(清空)

// 语法: window.localStorage.clear()

// window.localStorage.clear()

sessionStorage

+ 跨页面通讯能力

+ 只有当前页面跳转的才可已使用(在一个标签卡里面可以使用)

// 1. 设置

// 语法: window.sessionStorage.setItem(key, value)

window.sessionStorage.setItem('a', JSON.stringify(obj))

window.sessionStorage.setItem('b', obj2)

// window.sessionStorage.setItem('c', 100)

// 2. 删除

// 语法: window.sessionStorage.removeItem()

// window.sessionStorage.removeItem('a')

// 3. 获取

// 语法: window.sessionStorage.getItem(key)

console.log(window.sessionStorage.getItem('a'))

console.log(window.sessionStorage.getItem('b'))

// 4. 清除

// 语法: window.sessionStorage.clear()

// window.sessionStorage.clear()

浏览器的历史记录

+ 在 window 下有一个叫做 history 的对象

+ 内部存放的就是历史记录相关操作的方法

1. back

+ 语法: window.history.back()

+ 作用: 就是历史回退, 等价于浏览器的 ← 按钮

2. forward()

+ 语法: window.history.forward()

+ 作用: 就是历史回退, 等价于浏览器的 → 按钮

3. go()

+ 语法: window.history.go(数字)

=> 正整数: 表示历史前进

=> 零: 表示从新打开当前页面

=> 负整数: 表示历史回退

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)