【JavaScript】30_BOM对象

落月染紫
VIP.5 如鱼得水
101 阅读1分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第32天，点击查看活动详情

1、初识BOM

BOM

  • 浏览器对象模型

  • BOM为我们提供了一组对象，通过这组对象可以完成对浏览器的各种操作

  • BOM对象：

    • Window —— 代表浏览器窗口（全局对象）
    • Navigator —— 浏览器的对象（可以用来识别浏览器）
    • Location —— 浏览器的地址栏信息
    • History —— 浏览器的历史记录（控制浏览器前进后退）
    • Screen —— 屏幕的信息

  • BOM对象都是作为window对象的属性保存的，所以可以直接在JS中访问这些对象

     <script>
         console.log(history)
     </script>

image.png

2、navigator

  • Navigator —— 浏览器的对象（可以用来识别浏览器）

userAgent

返回一个用来描述浏览器信息的字符串

     <script>
         console.log(navigator.userAgent)
 ​
         let sBrowser
         const sUsrAg = navigator.userAgent
 ​
         if (sUsrAg.indexOf("Firefox") > -1) {
             sBrowser = "Mozilla Firefox"
             // "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
         } else if (sUsrAg.indexOf("SamsungBrowser") > -1) {
             sBrowser = "Samsung Internet"
             // "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36
         } else if (
             sUsrAg.indexOf("Opera") > -1 ||
             sUsrAg.indexOf("OPR") > -1
         ) {
             sBrowser = "Opera"
             // "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106"
         } else if (sUsrAg.indexOf("Trident") > -1) {
             sBrowser = "Microsoft Internet Explorer"
             // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
         } else if (sUsrAg.indexOf("Edge") > -1) {
             sBrowser = "Microsoft Edge (Legacy)"
             // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
         } else if (sUsrAg.indexOf("Edg") > -1) {
             sBrowser = "Microsoft Edge (Chromium)"
             // Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.64
         } else if (sUsrAg.indexOf("Chrome") > -1) {
             sBrowser = "Google Chrome or Chromium"
             // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
         } else if (sUsrAg.indexOf("Safari") > -1) {
             sBrowser = "Apple Safari"
             // "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
         } else {
             sBrowser = "unknown"
         }
 ​
         alert(`You are using: ${sBrowser}`)
     </script>

3、location

location 表示的是浏览器地址栏的信息

  • 可以直接将location的值修改为一个新的地址，这样会使得网页发生跳转
  • location.assign() 跳转到一个新的地址
  • location.replace() 跳转到一个新的地址（无法通过回退按钮回退）
  • location.reload() 刷新页面，可以传递一个true来强制清缓存刷新
  • location.href 获取当前地址
 <body>
     <button id="btn">点我一下</button>
     <input type="text" name="username" id="">
 ​
     <script>
         const btn = document.getElementById("btn")
         btn.addEventListener('click',() => {
         console.log(location.href)//当前地址
         // location = 'https://www.lilichao.com'//使得点击按钮后，发生跳转，实现标签a的功能，通过JavaScript
         // location.assign('https://www.lilichao.com')
         location.replace('https://www.lilichao.com')
         })
     </script>
 </body>

4、history

history.back()

  • 回退按钮

history.forward()

  • 前进按钮

history.go()

  • 可以向前跳转也可以向后跳转
 <body>
     <button id="btn">点我一下</button>
 ​
     <script>
         const btn = document.getElementById('btn')
 ​
         btn.onclick = () => {
             console.log(history.length)
             history.back()
             history.forward()
             history.go(-1)
         }
     </script>
 </body>
avatar
文章
阅读
粉丝