【亡羊补牢】JS灵魂之问 第10期 BOM对象知多少

引言

面试官:你知道BOM吗?
我:我知道DOM…
面试官:好了,我没啥要问的了
我:…

(上文仅供娱乐,并非真实场景)

仰望星空的人,不应该被嘲笑

BOM对象知多少

BOM,其实就是浏览器对象模型,比如浏览器前进,后退,刷新按钮,地址栏信息,关闭按钮,整个窗口等都是我们的浏览器对象,常见的有这几个对象:

1、window 对象

  • alert()
  • confirm()
  • prompt()
  • setInterval()
  • setTimeout()

2、location 对象(地址栏、关闭、跳转等)

  • href
  • hash
  • url
  • reload()

3、screen 对象(不常用)
4、history 对象(前进、后退操作)

  • go()

window对象探究

alert | confim | prompt

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>window对象常用方法</title>
</head>
<body>
  <script>
    window.alert('chocolate')
    let res = window.confirm('你确认要退出吗?')
    console.log(res)
    let val = window.prompt('请输入你喜欢的岗位','前端开发')
    console.log(val)
  </script>
</body>
</html>

页面结果:




setTimeout | setInterval

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>定时器方法</title>
  </head>
  <body>
    <script>
      window.setTimeout(function () {
        console.log(2)
      }, 0)
      console.log(1)
      let num = 0
      let timeId = null
      timeId = window.setInterval(function() {
        num++
        if(num > 5){
          clearInterval(timeId)
          return 
        }
        console.log(num)
      },1000)
    </script>
  </body>
</html>

打印结果:

location 对象的常用属性介绍

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>location对象</title>
</head>
<body>
  <from>
    <input type="text" name="user">
    <input type="password" name="pwd">
    <input type="submit">
  </from>
  <script>
    console.log(location.host) // 打印服务器地址+端口号
    console.log(location.hostname) // 返回服务器地址(没有端口号)
    console.log(location.port) // 打印服务器端口号
    console.log(location.search) // 打印地址栏查询条件
    console.log(location.href) // 打印完整url(已经进行了编码)
    console.log(location.pathname) // 打印文件目录路径
    console.log(location.protocol) // 打印协议
  </script>
</body>
</html>

打印如下结果:

当然浏览器的位置操作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>位置操作</title>
</head>
<body>
  <script>
    // 2秒之后调到某个网站(会产生历史记录,即点击后退按钮会返回原页面)
    setTimeout(function(){
      location.href = 'https://yangchaoyi.vip/'
    },2000)

    // 2秒之后调到某个网站(不会产生历史记录)
    setTimeout(function(){
      location.replace('https://yangchaoyi.vip/')
    },2000)

    // 2秒之后进行重载
    setTimeout(function(){
      location.reload()
    },2000)
  </script>
</body>
</html>

如何检测当前浏览器上的插件

引出 navigator 对象,其中有一个 plugins 属性:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>如何检测当前浏览器上的插件</title>
</head>
<body>
  <script>
    console.log(navigator)
    let hasPlugin = (name) => {
      name = name.toLowerCase()
      for(let i=0;i<navigator.plugins.length;i++){
        if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
          return true
        }
        else{
          return false
        }
      }
    }
    alert(hasPlugin('Flash'))
    alert(hasPlugin('Chrome PDF Plugin'))
  </script>
</body>
</html>

history对象

对于 history 对象,这里不太方便展示,就以文字表述了。常用的方法就是 go 方法,值设置为 0 代表刷新,值为 1 代表向前导航,值为 -1 代表向后找历史导航。前进和后退 n 次,设置 n 即可。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>history对象</title>
</head>
<body>
  <script>
    console.log(history)
    setTimeout(function(){
      history.go(0) //每隔2秒进行刷新
    },2000)
  </script>
</body>
</html>

最后

文章产出不易,还望各位小伙伴们支持一波!

往期精选:

小狮子前端の笔记仓库

访问超逸の博客,方便小伙伴阅读玩耍~

学如逆水行舟,不进则退
一百个Chocolate CSDN认证博客专家 CSDN博客专家 博客之星 前端开发攻城狮
JS,TS,LeetCode,Vue,React,算法爱好者。
主要分享前端知识,立志成为优秀前端博主。
座右铭:学如逆水行舟,不进则退!
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值