常用的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标签使用该语句,结果为0。
document.documentElement.scrollTop
// 当页面中没有DOCTYPE标签时()使用该语句。若有DOCTYPE标签使用该语句,结果为0。
document.body.scrollTop
// 通常我们使用或运算来解决兼容性问题。
var height = document.documentElement.scrollTop || document.body.scrollTop;
// 6.2、获取卷去的宽度。
// 当页面中有DOCTYPE标签时()使用该语句。若没有DOCTYPE标签使用该语句,结果为0。
document.documentElement.scrollLeft
// 当页面中没有DOCTYPE标签时()使用该语句。若有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'
});

浏览器弹出层显示结果:

常用的BOM操作_第1张图片 常用的BOM操作_第2张图片 常用的BOM操作_第3张图片

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

常用的BOM操作_第4张图片

浏览器卷去的尺寸:

常用的BOM操作_第5张图片

你可能感兴趣的:(JavaScript,javascript,前端,开发语言)