JS（四）之BOM

JS构成之BOM

• 一个完整的JavaScript实现应该由以下三个部分构成。
  • ECMAScript 标准
  • DOM 文档对象模型（操作网页）
  • BOM 浏览器对象模型（操作浏览器）
    JS系列的学习，主要围绕这三部分开展。

BOM

• 浏览器对象模型
• BOM可以使我们通过JS来操作浏览器
• 在BOM中为我们提供了一组对象，用来完成对浏览器的操作

BOM对象

• Window
  代表的是整个浏览器的窗口，同时window也是网页中的群居对象
• Navigator
  代表的是当前浏览器的信息，通过该对象可以来识别不同浏览器
• Location
  代表当前浏览器的地址栏信息，通过Location可以来获取地址栏信息，或者操作浏览器跳转页面
• History
  代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
  由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前向后，而且该操作只在当次访问时有效
• Screen
  代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关信息
  这些BOM对象在浏览器都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用。

Navigator

• 由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
• 一般我们只会使用userAgent来判断浏览器的信息
  userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容
  不同的浏览器会有不同的userAgent
• 不同浏览器的userAgent
  • chrome
    • Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 Safari/537.36
  • IE8
    • Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; InfoPath.3; .NET4.0C; .NET4.0E)
• IE9
  • Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; InfoPath.3; .NET4.0C; .NET4.0E)
• IE10
  • Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; InfoPath.3; .NET4.0C; .NET4.0E)
• IE11
  • Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; InfoPath.3; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
  • 在IE11中已经将微软额IE相关的标识都已经去除了，所以我们基本已经不能通过userAgent来识别一个浏览器是否是IE
  • 解决方案：特定的对象 ，例如ActiveXObject
• 判别不同浏览器

var ua = navigator.userAgent;
if(/firefox/i.test(ua)){
        alert("火狐");
    }else if (/chrome/i.test(ua)){
        alert("Chrome");
    }else if(/mise/i.test(ua)){
        alert("你是IE")
    }else if ("ActiveXObject" in window){
        alert("IE11");
    }

不可使用if(window.ActiveXObject),在IE11中，虽然可以输出，但他是false

History

• 对象属性
  • length 浏览器历史列表的URL数量
• 对象方法
  • back() 加载history列表的前一个URL
  • forward()加载history列表的下一个URL
  • go()加载history列表的某一个具体页面
    • 需要整数作为参数
    • 负数n表示back n个页面
    • 正数m表示forward n个页面

Location

• 直接打印location ，可获取到完整的地址栏信息
• 直接将location属性修改为一个完整的路径或者相对路径，可直接跳转到改路径，并且生成相应的历史记录
• 对象属性查询W3C
• 对象方法
  • assign 加载新的文档，效果与直接修改location相同
  • reload 重新加载当前文档
    • 方法中传递 true ，作为参数，强制清空缓存刷新页面
  • replace 用新的文档替换当前文档
    • 不会生成相应的历史记录，不能使用回退按钮

Window

定时器

• clearInterval
• clearTimeout
• setInterval 指定的周期来调用函数或计算表达式
• setTimeOut 指定的毫秒数后调用函数或计算表达式

setInterval

1. JS的代码执行速度是非常快的，但有时我们希望从中看出变化，每隔一段时间执行一次，可以定期调用
2. setInterval
   • 第一个参数：回调函数
   • 第二个参数：间隔时间，单位：毫秒
3. clearInterval
   • 可以接收任何任意参数
   • 参数为有效的定时器标识，则停止对应的定时器
   • 参数不是一个有效的标识，则什么都不做
4. 实例：

• HTML

<div id="count"></div>

• JS

var count = document.getElementById("count");
    var num = 1;
    var timer = setInterval(function () {
        count.innerHTML=num;
        num++;
        if(num==11){
            clearInterval(timer);
        }
    },1000);

注意：多次开启定时器，会导致操作变快
结论：每次开启前判断，或者关闭上次定时器

事件中的div移动最终版

修改连续操作时的卡顿

1. HTML

<div id="box"></div>

2. CSS

#box{
            height:100px;
            width: 100px;
            background-color: yellow;
            position: absolute;
        }

3. JS

window.onload = function(){
        var box = document.getElementById("box");
        var speed = 10;

        var dir = 0;
        var timer = setInterval(function () {
            switch (dir) {
                case 37:
                    box.style.left = box.offsetLeft - speed +"px";
                    break;
                case 38:
                    box.style.top = box.offsetTop - speed +"px";
                    break;
                case 39:
                    box.style.left = box.offsetLeft + speed +"px";
                    break;
                case 40:
                    box.style.top = box.offsetTop + speed +"px";
                    break;
            }
        },100);

        document.onkeydown = function (event) {
            event = event || window.event;
            dir = event.keyCode;
            if(event.ctrlKey){
                speed = 500;
            }
        }
        document.onkeyup = function () {
            dir = 0;
        }
    }

延时调用

• setTimeOut 指定的毫秒数后调用函数或计算表达式,用法与setInterval相似
• 延时调用与定时调用的区别：延时调用只执行一次，定时调用执行多次