常用的BOM操作

BOM操作包含了一整套操作浏览器相关内容的属性和方法。

我们可以使用这些方法执行如下操作。

• 操作浏览器历史记录。

• 操作浏览器滚动条。

• 操作浏览器页面跳转。

• 操作浏览器标签页的开启和关闭。

• …

// 1、获取浏览器可视窗口尺寸。
// 获取浏览器可视窗口宽度。
var w = window.innerWidth;
// 获取浏览器可视窗口高度。
var h = window.innerHeight;

// 2、获取浏览器的弹出层。
// 提示框。无返回值。
window.alert('提示信息');
// 询问框。点击确定返回true，点击取消返回false。
var res = window.confirm('提示信息');
// 输入框。返回输入的值。点击取消，返回null。输入框无内容点击确定返回空字符串。
var res = window.prompt('提示信息');
// 显示结果如下图。

// 3、开启/关闭标签页。
// 从当前标签页打开一个新的标签页，这个新的标签页的地址就是open()方法中的参数。
var openWindow = window.open("地址");
// 关闭由"var openWindow = window.open("地址");"打开的页面。
openWindow.close();
// 关闭当前标签页。
window.close();
// 显示结果如下图。

// 4、浏览器常见事件。
// 资源加载完毕后触发window.onload。
window.onload = function() {}
// 可视窗口尺寸改变时触发window.onresize。
window.onresize = function() {}
// 浏览器滚动条位置改变时触发window.onscroll。
window.onscroll = function() {}

// 5、浏览器历史记录操作。
// 回退页面。
window.history.back();
// 前进页面。
window.history.forward();

// 6、获取浏览器卷去的尺寸。
/*
当页面大小超出浏览器可视窗口大小时，会出现滚动条，此时，
可视窗口上方没有显示出来的那部分的高度是浏览器卷去的高度
（注意：可视窗口下方没有显示出来的那部分的高度不是浏览器卷去的高度）；
可视窗口左侧没有显示出来的那部分的宽度是浏览器卷去的宽度
（注意：可视窗口右侧没有显示出来的那部分的宽度不是浏览器卷去的宽度）。
可将其理解为商店的那种卷帘门。
如下图所示。
*/
// 6.1、获取卷去的高度。
// 当页面中有DOCTYPE标签时(<!DOCTYPE [html等]>)使用该语句。若没有DOCTYPE标签使用该语句，结果为0。
document.documentElement.scrollTop
// 当页面中没有DOCTYPE标签时(<!DOCTYPE [html等]>)使用该语句。若有DOCTYPE标签使用该语句，结果为0。
document.body.scrollTop
// 通常我们使用或运算来解决兼容性问题。
var height = document.documentElement.scrollTop || document.body.scrollTop;
// 6.2、获取卷去的宽度。
// 当页面中有DOCTYPE标签时(<!DOCTYPE [html等]>)使用该语句。若没有DOCTYPE标签使用该语句，结果为0。
document.documentElement.scrollLeft
// 当页面中没有DOCTYPE标签时(<!DOCTYPE [html等]>)使用该语句。若有DOCTYPE标签使用该语句，结果为0。
document.body.scrollLeft
// 通常我们使用或运算来解决兼容性问题。在js中，0代表的布尔值是false，所以谁为真，结果就是谁。
var width= document.documentElement.scrollLeft || document.body.scrollLeft;

// 7、设置浏览器滚动条的位置。
// left表示浏览器卷去的宽度定位(eg: 300)，top表示浏览器卷去的高度定位(eg: 400)。
// 使用该参数的方法只能瞬时定位，即一旦触发，滚动条瞬间处在设置的位置。
window.scrollTo(left, top);
// 传递一个对象数据类型作为参数。
// left表示浏览器卷去的宽度定位，top表示浏览器卷去的高度定位。
// behavior表示定位的方式，其有两个值："auto"表示立即滚动(默认)，"smooth"表示平滑滚动。
window.scrollTo({
    left: xx,
    top: yy,
    behavior: 'smooth'
});

浏览器弹出层显示结果：

开启/关闭标签页显示结果：

浏览器卷去的尺寸：