js之BOM教程

Mark   in HangZhou

导语：今天开始介绍一篇有关BOM知识点的总结文章。

BOM顾名思义，就是游览器对象模型，英文是Browser Object Model的简称。这个套模型定义了JavaScript如何操作游览器窗口以及获取游览器本身的一些信息，包括窗口的各种高度和宽度，滚动高度和宽度，历史纪录，url的相关信息，游览器的相关信息等知识。

# Window对象

在游览器中，javascript的Window对象就等同于全局对象，并且在该全局对象下定义的属性和方法也就等同于Window对象的属性和方法。

例如：一个变量和一个函数

var i=10;
console.log(window.i) // 10;
function fn() { console.log('fn'); }
console.log(window.fn) // ƒ fn() { console.log('fn'); }
1
2
3
4

Window对象自身有很多的属性和方法，以下是几种Window对象中常用的属性和方法。这些方法由于是Window对象下面的方法，所以可以省略不写。

# 窗口信息

这个有些方法ie是document.documentElement.方法，谷歌火狐是document.body.方法。

  • 外边框的宽高 用法：宽，window.outerWidth；高window.outerHeight。

例如：

console.log('外边框的宽高:'+window.outerWidth+'*'+window.outerHeight); // 外边框的宽高:1536*824
1
  • 内边框的宽高

用法：宽，window.innerWidth；高window.innerHeight。

例如：

console.log('内边框的宽高:'+window.innerWidth+'*'+window.innerHeight); // 内边框的宽高:1164*723
1
  • 可视窗口的宽高

用法：宽，document.documentElement.clientWidth；高document.documentElement.clientHeight。

例如：

console.log('可视窗口的宽高:'+document.documentElement.clientWidth+'*'+document.documentElement.clientHeight); // 可视窗口的
宽高:1164*723
1
2
  • 滚动窗口的坐标

用法：宽，window.scrollX；高window.scrollY。

例如：

console.log('滚动窗口的坐标:'+window.scrollX+'*'+window.scrollY); // 滚动窗口的坐标:0*0
1
  • 滚动窗口的左上

用法：左，document.documentElement.scrollLeft；上document.documentElement.scrollTop。

例如：

console.log('滚动窗口的左上:'+document.documentElement.scrollLeft+'*'+document.documentElement.scrollTop); // 滚动窗口的左上:0*0
1
  • 元素的宽高左右

用法：

左：document.documentElement.offsetLeft；

上：document.documentElement.offsetTop，

宽：document.documentElement.offsetWidth，

高：document.documentElement.offsetHeight。

例如：

<div class="box" style="margin:10px;width:100px;height:100px;">盒子</div>
1
var box = document.querySelector('.box');
console.log('元素距离距离窗口的宽高:'+box.offsetWidth+'*'+box.offsetHeight); // 元素距离距离窗口的宽高:100*100
console.log('元素距离距离窗口的左右:'+box.offsetLeft+'*'+box.offsetTop); // 元素距离距离窗口的左右:18*106
1
2
3

# 屏幕信息

这个是Screen对象的有关属性，Window对象的screen属性就是引用的Screen对象。

  • 显示器的大小

用法：宽window.screen.width，高window.screen.height。

例如：

console.log('显示器的大小:'+window.screen.width+'*'+window.screen.height); // 显示器的大小:1536*864
1
  • 实际可用的显示大小

用法：宽window.screen.availWidth，高window.screen.availHeight。

例如：

console.log('实际可用的显示大小:'+window.screen.availWidth+'*'+window.screen.availHeight); // 实际可用的显示大小:1536*824
1
  • 屏幕第一个可用位置的坐标

用法：宽window.screen.availLeft，高window.screen.availTop。

例如：

console.log('屏幕第一个可用位置的坐标:'+window.screen.availLeft+'*'+window.screen.availTop); // 屏幕第一个可用位置的坐标:0*0
1

# 对话框

对话框就是你可以对它进行操作，但是用户体验稍微差点，所以后来慢慢的，这个对话框就变成了程序完成后调试bug的作用了。

对话框还有一点就是，它阻塞了游览器解析进程，你需要对当前对话框进行操作完成后才能进行下一项渲染，或者是看见了页面内容，或者是开始其他操作。

  • alert()

这个方法就是一个简单的对话框，里面接受一个字符作为显示在游览器窗口的内容。向用户显示信息并且需要用户手动关闭。

用法：window.alert(<内容>);，这个方法是Window对象下面的方法，所以可以省略不写。

这样也可以执行的alert(<内容>);。

例如：window.alert('欢迎光临本网站！');

  • confirm()

这个方法就是一个简单的对话框，里面需要输入内容，有两个按钮，一个是确定，另一个是取消。它的返回值是布尔值，当你点击确定，会返回true；当你点击取消，会返回false。

用法：confirm(<内容>);

例如：

var res = confirm('你过年回家吗？');
console.log(res ? '我回家' : '我不回家'); // 点击确定：我回家；点击取消： 我不回家
1
2
  • prompt()

这个方法就是一个简单的对话框，里面需要输入一个字符串，有两个按钮，一个是确定，另一个是取消。它的返回值是你输入框中的内容，当你点击确定，会返回输入框的内容；当你点击取消，会返回null。

用法：prompt(<字符串>);

例如：

var res = prompt('你喜欢吃什么小吃？'); // 你可以输入任何字符串，例如我输入了沙县小吃
console.log(res); // 点击确定：沙县小吃；点击取消： null
1
2

# 定时器

定时器是web客户端里面定义的一个全局方法，核心的JavaScript并没有定义这个方法。

定时器的功能就是在未来某个时间进行某段代码的执行，可以有一次的或者多次的执行。

注意：setTimeout只执行一次，setInterval可以一直连续的执行。

  • setTimeout()

这个方法就是用来使一个函数在指定的时间内（单位是毫秒ms）过去之后执行。这个有时候被拿来模拟ajax异步操作。

用法：setTimeout(fn,time);,第一个参数就是一个函数或者函数的名称，第二个参数就是时间。

例如：一秒后打印我爱你

//1.函数名称
setTimeout(fn,1000);
function fn() {
  console.log('我爱你'); // 我爱你
}
//2.函数
setTimeout(function(){
  console.log('我爱你'); // 我爱你
},1000);
1
2
3
4
5
6
7
8
9
  • clearTimeout()

这个方法可以取消setTimeout方法中第一个参数函数的执行。

用法：clearTimeout(函数名称);，参数是setTimeout方法中第一个参数的函数名称。

例如：

var fn = setTimeout(function(){
  console.log('我爱你');
},3000);
clearTimeout(fn);
1
2
3
4
  • setInterval()

这个方法就是用来使一个函数在指定的时间内（单位是毫秒ms）重复的调用执行。这个有时候被拿来做模拟时钟或者动画。

用法：setInterval(fn,time);,第一个参数就是一个函数或者函数的名称，第二个参数就是时间。

例如：把当前时间显示在游览器窗口中，并且时间是动态走动。

<div id="time"></div>
1
//1.函数名称
var time = document.querySelector('#time');
var timer = setInterval(fn,1000);
function fn() {
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var day = now.getDay();
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();
  month = month >= 10 ? month : '0' + month;
  day = day >= 10 ? day : '0' + day;
  hour = hour >= 10 ? hour : '0' + hour;
  minute = minute >= 10 ? minute : '0' + minute;
  second = second >= 10 ? second : '0' + second;
  time.innerHTML = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
}
//2.函数
var timer = setInterval(function(){
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var day = now.getDay();
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();
  month = month >= 10 ? month : '0' + month;
  day = day >= 10 ? day : '0' + day;
  hour = hour >= 10 ? hour : '0' + hour;
  minute = minute >= 10 ? minute : '0' + minute;
  second = second >= 10 ? second : '0' + second;
  time.innerHTML = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
},1000);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
  • clearInterval()

这个方法可以取消setInterval方法中第一个参数函数的执行，停止重复调用这个函数。

用法：clearInterval(函数名称);，参数是setInterval方法中第一个参数的函数名称。

例如：要取消上面那个例子的时钟走动。

clearInterval(timer);
1

# 打开和关闭新窗口

这个可以打开或者关闭一个新窗口，但是随着时代经济的发展，越来越多的网站把它用于投放展示广告，导致很多游览器封杀了这两个方法，除非是用户自己点击新窗口。

  • open()

这个方法是可以打开一个新的窗口。

用法：open(一参,二参,三参,四参);，以下是参数说明：

  • 第一参数是你要打开新窗口的url；

  • 第二个参数是你要打开新窗口的名称，可以是a标签的target属性中的值，也可以自定义；

  • 第三个参数是新窗口的一些属性定义，比如说状态了，宽和高，也没有菜单栏等；

  • 第四个参数是是否覆盖掉当前的页面历史纪录，如果是true，那就覆盖掉，否则就新增一条历史记录。

例如：打开一个宽高为300*400的，显示状态栏的，内容为你好，世界，不覆盖当前url的历史纪录的一个新窗口。

<!-- 保存为new.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>新窗口</title>
</head>
<body>
  <h2>你好，世界</h2>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
function openNew() {
  window.open('new.html','width=200,height=200,status=yes',false);
}
openNew();
1
2
3
4
  • close()

这个方法是关闭当前的窗口网页。

用法：close();

例如：

function closeWin() {
  window.close();
}
closeWin();
1
2
3
4

# Location对象

这个Location对象提供了当前文档的url的一些信息，包括协议，域名，端口号，url参数等信息。

窗口的location属性引用的是Location对象。它代表当前文档的url信息。

# location的属性

用法：window.location，属性包括：

  • protocol 网页通信协议；

  • host 网页域名（包括域名和端口）；

  • hostname 网页域名名字（）；

  • port 端口号

  • href 网页地址

  • hash 哈希值

  • search 参数内容（包括?号）

console.log('url信息：',window.location);
/* url信息：
Location {
  ancestorOrigins: DOMStringList {length: 0}
  assign: ƒ ()
  hash: ""
  host: "localhost:2009"
  hostname: "localhost"
  href: "http://localhost:2009/test.html"
  origin: "http://localhost:2009"
  pathname: "test.html"
  port: "2009"
  protocol: "http:"
  reload: ƒ reload()
  replace: ƒ ()
  search: ""
  toString: ƒ toString()
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# location的方法

  • reload();重新载入当前网页

location或者location.href; 载入新的网页url

  • replace(); 重新载入当前网页（会覆盖掉当前网页的历史纪录）

例如：

//1.重新载入当前网页
window.location.reload();
//2.载入新的网页url
window.location = 'test.html';
window.location.href = 'test.html';
//3.重新载入当前网页（会覆盖掉当前网页的历史纪录）
window.location.replace();
1
2
3
4
5
6
7

案例：解析url的参数

var url = 'http://www.abc.com/index?name=keke&type=1';
function getUrlArgs() {
  var args = new Object();
  var query = location.search.substring(1);
  var pairs = query.split('&');
  for(var i=0;i<pairs.length;i++) {
    var pos = pairs[i].indexOf('=');
    if (pos == -1) { continue; }
    var argname = pairs[i].substring(0,pos);
    var value = pairs[i].substring(pos+1);
    value = decodeURIComponent(value);
    args[argname] = value;
  }
  return args;
}
console.log(getUrlArgs()); // { name: "keke", type: "1" }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# History对象

这个History对象可以允许载入新的文档或者游览器后退或者前进游览过的文档。

窗口的history属性引用的是History对象。

  • forward()

这个方法可以使游览器载入到新文档，和游览器的前进箭头按钮功能一样。

用法：forward();，不需要传参。

例如：

function forwardTo() {
  history.forward();
}
forwardTo();
1
2
3
4
  • back();

这个方法可以使游览器后退到以前游览过的网页，和游览器的后退箭头按钮功能一样。

用法：back();，不需要传参。

例如：

function backTo() {
  history.back();
}
backTo();
1
2
3
4
  • go()

这个方法可以使游览器前进或者后退到以前游览过的网页。

用法：go();，需要传参，正参就是前进几个历史纪录，负参就是后退几个历史纪录。

例如：

function goTo(val) {
  history.go(val);
}
goTo(1);
goTo(-1);
1
2
3
4
5

这个Navigation对象可以储存的当前游览器的信息，包括版本号，app名称，游览器内核名称，系统版本等。

Window对象的navigator属性引用的是Navigation对象。

打印查看当前游览器信息直接执行console.log(window.navigator)就可以了。

常用的属性

  • appName，游览器的简称；

  • appVersion，游览器的内部版本号；

  • appCodeName，游览器的代码名称；

  • platform，运行游览器的硬件平台；

  • userAgent，用户代理，游览器在它的USER-AGENT HTTP头部发送字符串。

例如：打印当前游览器的信息

function getnNavigatorInfo() {
  var obj = new Object();
  var proArr = ['appName','appVersion','appCodeName','platform','userAgent'];
  for (var key in navigator) {
    for(var i=0;i<proArr.length;i++) {
      if (key == proArr[i]) {
        obj[key] = navigator[key];
      }
    }
  }
  return obj;
}
console.log(getnNavigatorInfo());
/*
appCodeName: "Mozilla"
appName: "Netscape"
appVersion: "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36"
platform: "Win32"
userAgent: "Mozilla/5.0 (Windows NT 10.0; ...
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 案例：检测游览器

  • 检测游览器名称
function checkBrowserName () {
  if (navigator.userAgent.indexOf('Chrome') != -1) {
    console.log('这是谷歌游览器');
  } else if (navigator.userAgent.indexOf('Trident') != -1 || navigator.appVersion.indexOf('MSIE') != -1 ) {
    console.log('这是ie游览器');
  } else if (navigator.userAgent.indexOf('Firefox') != -1) {
    console.log('这是火狐游览器');
  } else if (navigator.userAgent.indexOf('Opera') != -1) {
    console.log('这是Opera游览器');
  } else if (navigator.userAgent.indexOf('Safari') != -1) {
    console.log('这是Safari游览器');
  }
}
checkBrowserName();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  • 检测ie游览器版本
function checkIeVersion () {
  var ie = navigator.userAgent.indexOf('Trident') == -1 ? false : true;
  var version = navigator.appVersion;
  console.log(version);
  var versionName = '';
  if (ie && version) {
    if (version.indexOf('rv:11.0') != -1) {
      versionName = 'ie11'
    } else if (version.indexOf('MSIE 10.0') != -1) {
      versionName = 'ie10'
    } else if (version.indexOf('MSIE 9.0') != -1) {
      versionName = 'ie9'
    } else if (version.indexOf('MSIE 8.0') != -1) {
      versionName = 'ie8'
    } else if (version.indexOf('MSIE 7.0') != -1) {
      versionName = 'ie7'
    }
  }
  return versionName;
}
console.log(checkIeVersion());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 写在最后

这期的BOM知识分享就结束了，希望可以用起来，细细体会这其中的神奇奥秘。

版权声明：博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：js之BOM教程

如需转载，请注明《js之BOM教程》转自，原作者Mark

分享至：

  • qq
  • qq空间
  • 微博
  • 豆瓣
  • 贴吧
Window对象
窗口信息
屏幕信息
对话框
定时器
打开和关闭新窗口
Location对象
location的属性
location的方法
History对象
Navigation对象
案例：检测游览器
写在最后
  • Copyright © 2017-2024 MarkGuan