JS BOM

Javascript由 ECMAScript、BOM 和 DOM 组成。
     BOM ( Browser Object Model ) : 即浏览器对象模型。
     BOM 允许开发者使用 JavaScript 操作浏览器。
     BOM 没有统一规范，不同的浏览器提供了各不相同的BOM接口，这使得BOM既有意思又很复杂。。。

BOM中主要包含以下几个对象：

• window对象 ： 代表浏览器窗口；
• Location对象 ： 用于获取和操作当前页面的地址信息；
• Navigator对象 ： 用于获取和操作访问者的浏览器的信息；
• screen对象： 用于获取用户的屏幕信息；
• History对象 ： 用于获取和操作浏览器的历史信息。

Window对象

所有浏览器都支持 window 对象。它代表浏览器的窗口。

所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。
例如：

var age = 29;
function sayAge() {
    alert(this.age);
}
alert(window.age);//29
sayAge();//29
window.sayAge();//29

由于在全局作用域定义了一个全局变量和函数，所以他们自动的被认为是 window 对象的属性和方法。所以使用 window 和不使用 window 的结果是一样的。

window属性

窗口位置

1.用来确定和修改 window 对象( 窗口 )的属性和方法有很多。
主要有：

• screenLeft ：窗口距离屏幕左边的位置坐标 ，IE Chrome Opera 和 Safari 提供
• screenTop : 窗口距离屏幕顶部的位置坐标
• screenX : 窗口距离屏幕左边的位置坐标 , Firfox 提供
• screenY : 窗口距离屏幕顶部的位置坐标

最好的解决兼容性的问题的方法：

var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;

可以自己感受一下这几个属性的含义。

虽然我们可以使用这几个属性访问不同的浏览器的窗口位置信息。但是每个浏览器的计算方法又是不一样。比如，有的浏览器的相对于顶部位置有可能是减去浏览器工具条之后的位置坐标。

最终结果是，无法获取在跨浏览器的条件下取得窗口左边和上边的精确位置。

2.移动窗口位置

我们可以使用 JS 来移动浏览器的窗口位置。很显然，根本不会用到这些属性。
移动主要有两个方法：moveTo() 和 moveBy()。
这两个方法都接收两个参数：分别表示 X 坐标和 Y 坐标。例如：

window.moveTo(0, 0);//将窗口移动到左上角
window.moveTo(200, 300); //将窗口移动到(200, 300)
window.moveBy(0, 100);//将窗口向下移动100像素
window.moveBy(200, 0);//将窗口向右移动200像素

窗口大小

和位置一样，有以下几个属性：

• 支持以下属性的浏览器是：IE9+ Firefox Opera Chrome Safari
• innnerWidth :
• innnerHeight :
• outerWidth :
• outerHeight :
  虽然几乎所有的浏览器都支持上面三个属性，但是不同的浏览器的计算方法各不相同，所以也比较乱，理清楚就好了。

主要有以下几个区别：

• Chrome 浏览器中的上面四个属性中 innnerWidth 和 outerWidth 返回的都是浏览器的窗口的宽度，同样的 innnerHeight 和 outerHeight 返回的都是浏览器的窗口高度。
• 在IE9+ Firefox Safri 浏览器中，outerWidth 和 outerHeight 返回的是浏览器本身的尺寸，而 innnerWidth 和 innnerHeight 返回的是视口(一个标签页的)大小。
• 在Oprea中 outerWidth 和 outerHeight 返回的是视口大小，而 innnerWidth outerWidth 返回的都是浏览器页面视图区的大小( 减去边框宽度 )

window方法

上面介绍了 window 对象的几个常用的属性，除此之外，既然是对象就会有方法。
由于 JS 是单线程语言，所以某一个时刻只能执行指定的代码。

但是可以调用方法使得某一段程序延后执行或者是间歇执行。主要是以下两个方法：
setTimeout : 经过一段时间后再执行相应的代码，称为超时调用；
setInterval() : 每个一段固定的时间间隔执行相应的代码，称为间歇调用。

超时调用

setTimeout 方法接受两个参数，第一个参数是包含 JS 的字符串也可以是一个函数，第二个参数是以毫秒表示时间。例如:

window.setTimeout("console.log('时间到，代码执行了!')", 1000);//不推荐字符串

推荐第一个参数使用函数：

window.setTimeout(function(){
    console.log("时间到，代码执行了!");
}, 1000);

以上两段代码经过 1000ms 后都会在控制台输出：

时间到，代码执行了!

• 方法的返回值及取消调用

  该方法会返回一个ID,表示超时在该页面中调用方法的ID，实际上是一个数字。如果是第一个就是 ID == 1，如果是第二个函数，返回值是2。使用该返回值我们可以很容易的定位这是第几个调用，可以随时取消该调用。

  var timeout1 = window.setTimeout(function() {
      console.log('HelloWorld!');
  }, 1000);
  window.clearTimeout(timeout1);//把上面的这个超时调用的行为取消了
  

---

间歇调用

setInterval() 方法也接受两个参数，第一个参数同样是包含 JS 的字符串也可以是函数，第二个参数是以毫秒表示的时间。例如:

window.setInterval("console.log('1s到了，代码执行了!')", 1000);//不推荐字符串

推荐第一个参数使用函数：

window.setTimeout(function(){
    console.log("1s到了，代码执行了!");
}, 1000);

以上两段经过 1000ms 后都会在控制台输出，无限循环。

• 方法的返回值及取消间歇调用
  该部分和 setTimeout() 方法一样。返回的是间歇调用的ID，以及使用该ID进行取消这一行为。

  var timeinterval = window.setInterval(function() {
      console.log('HelloWorld!');
  }, 1000);
  window.clearINterval(timeinterval);//把上面的这个间歇调用的行为取消了
  

location对象

location 对象是最有用的BOM对象之一，他提供了与当前窗口中加载的文档有关的信息。

location 对象是一个很特别的对象，因为它既是 window 对象的属性，也是 document 对象的属性，但是一般我们在调用的时候不需要前缀，window.location 或者是 document.location。

1.该对象具有的属性有：

• host : 返回服务器名称和端口号，例如：www.codedancer.online:80;
• hostname : 只返回服务器的名称，不包偶阔端口号：www.codedancer.online;
• port : 返回端口号，例如默认的 80 端口;
• protocol : 返回页面使用的协议，例如：http 或者是 https;
• href : 返回访问当前页面的完整的 url， 比如： https://www.baidu.com;
• pathname : 返回文档路径,例如：/categories/。

2.方法:位置操作(切换URL)
使用location对象可以挺过很多的方式来改变浏览器的位置。
最常用的方法就是 assign():

location.assign("https://www.baidu.com");

这样就可以在立即打开新的URL并且在历史记录中生成一条新的记录。和下面的语法等价：

location = "https://www.baidu.com";
location.href = "https://www.baidu.com";

navigator对象

navigator 对象可以使我们可以获得用户浏览器的信息，比如说使用的什么类型的浏览器，浏览器安装的插件有哪些以及浏览器的 cookie 信息。

该对象的属性很多，但是一些根本不会使用，甚至即使用了也可能得不到我们期望的结果。

下面是经常使用的一些属性：具体的可以参考:https://www.w3school.com.cn/

• appName : 完整的浏览器信息；
• appCodeName : 浏览器的名称，同城都是Mozilla，即使在非Mozilla的浏览器中也是如此；
• platform : 浏览器所在系统：windows、Mac OS、Linux等等；
• language : 浏览器的语言；
• systemLanguage : 浏览器所在系统的语言；
• JavaEnable : 当前浏览器是否开启Java；
• plugins : 获取插件信息。

每个浏览器的差别使得该对象很难使用，基本上不会使用。

我们在 Firefox 以及在 Chrome 中获取以上信息的差别：
在Firefox中

console.log(navigator.appName);//输出：Netscape
console.log(navigator.appCodeName);//输出: Mozilla
console.log(navigator.platform);//输出: Win32
console.log(navigator.language);//输出: zh_CN
console.log(navigator.systemLanguage);//输出: undefined，火狐不支持
console.log(navigator.JavaEnable);//输出: undefined,火狐不支持
console.log(navigator.plugins);//输出: pluginArray { length: 0 }

在Chrome中

console.log(navigator.appName);//输出：Netscape
console.log(navigator.appCodeName);//输出: Mozilla
console.log(navigator.platform);//输出: Win32
console.log(navigator.language);//输出: zh_CN
console.log(navigator.systemLanguage);//输出: undefined，Chrome不支持
console.log(navigator.JavaEnable);//输出: undefined,Chrome不支持
console.log(navigator.plugins);//输出: pluginArray 

由以上可以看出，在两个不同的浏览器中几乎没有任何区别，所以，要它有何用。

screen对象

screen 对象更简单，表示的是用户( 访问者 ) 的屏幕信息。用处不大。

我们主要学习它的四个属性：

• width : 获取用户屏幕的像素宽度；
• height : 获取用户屏幕的像素高度；
• availWidth : 屏幕的像素宽度减去系统部件宽度之后的值，小于或等于width 属性获取的值；
• availHeight : 屏幕的像素高度减去系统部件高度之后的值，小于或等于height 属性获取的值；

注意：屏幕大小并不是分辨率，而是指的是尺寸，因为同样的分辨率，如果是屏幕的大小不一样，说明每个像素点的大小不一样。

history对象

window.history 对象可不带 window 书写。
为了保护用户的隐私，JavaScript 访问此对象存在限制。
最有可能使用的两个方法：

• history.back() - 等同于在浏览器点击后退按钮
• history.forward() - 等同于在浏览器中点击前进按钮

back()方法

history.back() 方法加载历史列表中前一个 URL。

这等同于在浏览器中点击后退按钮。

实例1
在页面中创建后退按钮：

<html>
    <head>
        <script>
        var btn = document.getElementById("btn");
        btn.onclick = function() {
          history.back();
        }
        </script>
    </head>
    <body>
        <button id="btn">back</button>
    </body>
</html>

forward() 方法

history forward() 方法加载历史列表中下一个 URL。

这等同于在浏览器中点击前进按钮。

实例2
在页面中创建前进按钮：

<html>
    <head>
        <script>
        var btn = document.getElementById("btn");
        btn.onclick = function() {
          history.back();
        }
        </script>
    </head>
    <body>
        <button id="btn">forward</button>
    </body>
</html>