什么是BOM?
BOM,Browser Object Model,即浏览器对象模型。浏览器页面初始化时,会在内存创建一个全局对象,用来描述当前窗口的属性和状态,这个全局对象被称为浏览器对象模型。
不同于DOM的标准化组织是W3C,JavaScript的语法标准化组织是ECMA,BOM没有官方标准,对于现代浏览器,每个浏览器都有自己的BOM实现方法,所以直接使用BOM会有兼容性问题。
BOM包含哪些内容?
BOM有一个核心对象window,window对象包含了6大核心模块,分别是:
document对象,即文档对象
frames,即HTML自框架
history,即页面的历史记录
location,即当前页面的地址
navigator,包含浏览器相关信息
screen,用户显示屏幕相关属性
Window 对象的属性
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一
窗口尺寸:
window对象有两个用来定义浏览器窗口大小的属性(两个属性均返回以px像素为单位的数值)
浏览器窗口(浏览器视口)不包括工具栏和滚动条。
window.innerHeight属性:返回窗口的文档显示区的高度
浏览器窗口的视口(viewport)高度(CSS布局占据的浏览器窗口的高度),如属性只读,,且没有默认值
var intViewportHeight = window.innerHeight;
window.innerWidth属性:返回窗口的文档显示区的宽度
浏览器视口(viewport)宽度(单位:像素),属性只读,,且没有默认值
*全屏状态下,不同的浏览器因为布局不一样,也会返回不同的innerHeight和innerWidth
兼容所有浏览器写法
var intViewportWidth = window.innerWidth;
<p id="demo"></p>
<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
var x = document.getElementById("demo");
x.innerHTML = "浏览器内窗宽度:" + w + ",高度:" + h + "。";
</script>
Window pageXOffset 和 pageYOffset 属性
pageXOffset属性: 设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset属性:设置或返回当前页面相对于窗口显示区左上角的 Y 位置。(pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。这些属性是只读的。)
window.scrollBy(100, 100);
if (window.pageXOffset !== undefined) { // 所有浏览器,除了 IE9 及更早版本
alert("水平滚动: " + window.pageXOffset
+ ", 垂直滚动: " + window.pageYOffset);
} else { // IE9 及更早版本
alert("水平滚动: " + document.documentElement.scrollLeft
+ ", 垂直滚动: " + document.documentElement.scrollTop);
}
screenLeft screenTop:只读整数。声明了窗口的左上角在屏幕上 的 X 坐标和 Y 的坐标。IE、Safari、Chrome 和 Opera
screenX: 支持 screenLeft 和 screenTop,而Chrome、Firefox 和 Safari 支持 screenX 和 screenY
<div id="box"></div>
<script>
document.getElementById("box").onclick = function(e){
console.log("相对于屏幕的"+e.screenX,e.screenY)
console.log("相对于文档显示区" + e.clientX,e.clientY)
console.log("相对于当前元素的" + e.offsetX,e.offsetY)
}
</script>
Window 对象的常用方法:
JavaScript 有三种类型的弹出框:警告框、确认框和提示框。
警告框
如果要确保信息传递给用户,通常会使用警告框。
当警告框弹出时,用户将需要单击“确定”来继续。
window.alert() 方法可以不带 window 前缀来写。
alert("我是一个警告框!");
确认框
如果您希望用户验证或接受某个东西,则通常使用“确认”框。
当确认框弹出时,用户将不得不单击“确定”或“取消”来继续进行。
如果用户单击“确定”,该框返回 true。如果用户单击“取消”,该框返回 false。
语法:
var r = confirm("请按按钮");
if (r == true) {
x = "您按了确认!";
} else {
x = "您按了取消!";
}
提示框
如果您希望用户在进入页面前输入值,通常会使用提示框。
当提示框弹出时,用户将不得不输入值后单击“确定”或点击“取消”来继续进行。
如果用户单击“确定”,该框返回输入值。如果用户单击“取消”,该框返回 NULL。
语法:
var person = prompt("请输入您的姓名", "比尔盖茨");
if (person != null) {
document.getElementById("demo").innerHTML = "你好 " + person + "!今天过的怎么样?";
}
JavaScript 可以在时间间隔内执行。
这就是所谓的定时事件( Timing Events)。
window对象运行执行特定的计时事件,通过 JavaScript 使用的有两个关键的方法:
setTimeout
setTimeout即隔一定时间后将事件加入到异步队列中
取消事件使用clearTimeout
setTimeout(fn, 毫秒数) 延时执行
setInterval
即每隔一个间隔时间将事件加入到异步队列
取消该事件使用clearInterval
setInterval(fn, 毫秒数) 循环执行
其他 Window 方法一些其他方法:
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸