Javascript-浏览器

_Koreyoshi
98 阅读3分钟

BOM

BOM（Browser Object Model）： 浏览器对象模型 表示由浏览器（主机环境）提供的用于处理文档之外的所有内容的其他对象。

  • 其实就是操作浏览器的一些能力
  • 我们可以操作哪些内容
    • 获取一些浏览器的相关信息（窗口的大小）
    • 操作浏览器进行页面跳转
    • 获取当前浏览器地址栏的信息
    • 操作浏览器的滚动条
    • 浏览器的信息（浏览器的版本）
    • 让浏览器出现一个弹出框（alert / confirm / prompt）
    • ...
  • BOM 的核心就是 window 对象
  • window 是浏览器内置的一个对象，里面包含着操作浏览器的方法
1. 获取浏览器窗口的尺寸

  • innerHeight 和 innerWidth

  • 这两个方法分别是用来获取浏览器窗口的宽度和高度（包含滚动条的）

    var windowHeight = window.innerHeight
console.log(windowHeight)

var windowWidth = window.innerWidth
console.log(windowWidth)
    2. 浏览器的弹出层

  • alert 是在浏览器弹出一个提示框

    window.alert('我是一个提示框')

    这个弹出层只是一个提示内容，只有一个确定按钮 点击确定按钮以后，这个提示框就消失了

  • confirm 是在浏览器弹出一个询问框

    var boo = window.confirm('我是一个询问框')
console.log(boo)

    这个弹出层有一个询问信息和两个按钮

    • 当你点击确定的时候，就会得到 true
    • 当你点击取消的时候，就会得到 false

  • prompt 是在浏览器弹出一个输入框

    var str = window.prompt('请输入内容')
console.log(str)
    • 这个弹出层有一个输入框和两个按钮
    • 当你点击取消的时候，得到的是 null
    • 当你点击确定的时候得到的就是你输入的内容
3. 浏览器的地址栏
  • 在 window 中有一个对象叫做 location
  • 就是专门用来存储浏览器的地址栏内的信息的
location.href

  • location.href 这个属性存储的是浏览器地址栏内 url 地址的信息

    console.log(window.location.href)
    • 会把中文变成 url 编码的格式

  • location.href 这个属性也可以给他赋值

    window.location.href = './index.html'
// 这个就会跳转页面到后面你给的那个地址

image.png

通过location href可以跳转到下一个页面

location.reload

  • location.reload() 这个方法会重新加载一遍页面，就相当于刷新

    window.location.reload()
    • 注意： 不要写在全局，不然浏览器就会一直处在刷新状态
4.浏览器的常见事件
(1) onload

image.png

在 html 页面中把 js 写在 head 里面
<html>
  <head>
    <meta charset="UTF-8" />
    <script>
    	// 这个代码执行的时候，body 还没有加载
      // 这个时候我们就获取不到 body 中的那个 div

      // 就需要使用 window.onload 事件
      window.onload = function () {
        // 这个函数会在页面加载完毕以后在执行
        // 那么这个时候页面的 DOM 元素都已经加载了，我们就可以获取 div 了
      }
    </script>
  </head>
  <body>
    <div></div>
  </body>
</html>
在 html 页面中把 js 写在 body 最后面
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div></div>

    <script>
    	// 这个代码执行的时候，body 已经加载完毕了
      // 在这里就可以获取到 div，写不写 window.onload 就无所谓了

      window.onload = function () {
        // 这个函数会在页面加载完毕以后在执行
        // 那么这个时候页面的 DOM 元素都已经加载了，我们就可以获取 div 了
      }
    </script>
  </body>
</html>
(2)resize

可以帮忙检测窗口大小的改变，也可以检测是横屏还是竖屏

image.png

（3） onscroll

滚动条

image.png

5.浏览器打开标签页

image.png

window.close：表示关闭

6. 浏览器的历史记录

window 中有一个对象叫history做是专门用来存储历史记录信息的

history.back

history.back 是用来回退历史记录的，就是回到前一个页面，就相当于浏览器上的 ⬅️ 按钮

```javascript
window.history.back()

```

*   前提是你要有上一条记录，不然就是一直在这个页面，也不会回退
history.forward

前进到下一个 +1，-1前进后退1个，+2，-2前进后退2个

7.本地存储

localStorage

用处：记住用户名存在本地中

//增
localStorage.setItem("name","kerwin")
//取
localStorage.getItem("name")
//删
localStorage.removeItem("name")
//清空
localStorage.clear()

只能存字符串，不能存对象

sessionStorage
//增
sessionStorage.setItem("name","kerwin")
//取
sessionStorage.getItem("name")
//删
sessionStorage.removeItem("name")
//清空
sessionStorage.clear()

区别：

localstorage为永久存储，关闭页面不会消失 sessionstorage为会话/临时存储，关闭页面会消失

avatar
文章
阅读
粉丝