又来学习BOM了,哈哈,Boooooom
一、BOM概述
BOM(Browser Object Model)即浏览器对象模型,是前端操作浏览器的核心,该对象提供了与浏览器交互相关对象结构。BOM由多个子对象组成,其核心为window对象,它是BOM的顶层对象。
二、window
表示在浏览器环境中的一个全局的顶级对象,所有在浏览器环境中使用的对象都是window对象的子对象。它有非常多的属性和方法。
1、window 对象的属性
closed | 当窗口关闭时为真 |
defaultStatus | 窗口底部状态栏显示的默认状态消息 |
document | 窗口中当前显示的文档对象 |
frames | 窗口中的框架对象数组 |
history | 保存着窗口最近加载的URL |
length | 窗口中的框架数 |
location | 当前窗口的URL |
name | 窗口名 |
offscreenBuffering | 用于绘制新窗口内容并在完成后复制已存在的内容,控制屏幕更新 |
opener | 打开当前窗口的窗口 |
parent | 指向包含另一个窗口的窗口(由框架使用) |
screen | 显示屏幕相关信息,如高度、宽度(以像素为单位) |
self | 指示当前窗口 |
status | 描述由用户交互导致的状态栏的临时消息 |
top | 包含特定窗口的最顶层窗口(由框架使用) |
window | 指示当前窗口,与self 等效 |
打开 F12 console即可验证
说一说窗口尺寸的获取
涉及不同浏览器的兼容性问题,在这里做一个总结。
窗口位置
IE、Safari、Opera 和Chrome 支持
screenLeft 窗口相对于屏幕左边的位置
screenTop 窗口相对于屏幕上边的位置
firefox 支持
screenX 窗口相对于屏幕左边的位置
screenY 窗口相对于屏幕上边的位置
兼容处理:
var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX;
var topY = (typeof screenTop == 'number') ? screenTop : screenY;
窗口大小
IE、Firefox、Safari、Opera 和Chrome 均支持
innerWidth和innerHeight,返回浏览器窗口本身的尺寸;
outerWidth 和outerHeight,返回浏览器窗口本身及边框的尺寸。
旧版IE:
document.documentElement.clientWidth document.documentElement.clientHeight
兼容怪异模式
document.body.clientWidth; //非标准模式使用body document.body.clientHeight;
终版兼容
function client() {
return {
clientWidth: window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth || 0;
clientHeight: window.innerHeight || document.body.clientHeitght || document.documentElement.clientHeight || 0;
};
}
其他:
window.pageYOffset(pageXOffset):浏览器窗口顶部与文档顶部之间的距离(浏览器窗口与文档左侧之间的距离)也就是滚动条滚动的距离。
scroll系列 document.documentElement
scrollHeight和scrollWidth | 对象内部的实际内容的高度/宽度(不包括border) |
scrollTop和scrollLeft | 被卷去部分的顶部/左侧 到 可视区域 顶部/左侧 的距离 |
onscroll事件 | 滚动条滚动触发的事件 |
页面滚动坐标 | var scrollTop = window.pageYoffset || document.documentElement.scrollTop || document.body.scrollTop || 0; |
offset系列 document.documentElement
offsetWidth和offsetHeight | offsetHeight的构成 | offsetHeight = height + padding + border offsetWidth相同 |
| offsetHeight和style.height的区别 | 1. demo.style.height只能获取行内样式,否则无法获取到 2. .style.height是字符串(有单位px), offsetHeight是数值(无单位) 3. .style.height可以设置行内样式,但offsetHeight是只读属性,不可设置 所以:demo.style.height获取 某元素的真实高度/宽度,用.style.height来设置高度/宽度 |
offsetLeft和offsetTop | offsetLeft的构成 | 1,到距离自身最近的(带有定位的)父元素的 左侧/顶部 2,如果所有父级元素都没有定位,则以body为准 3,offsetLeft是自身border左侧到父级padding左侧的距离 |
| offsetLeft和style.left的区别 | 1,style.left只能获取行内样式 2,offsetLeft只读,style.left可读可写 3,offsetLeft是数值,style.left是字符串并且有单位px 4,如果没有定位,style.left获取的数值可能是无效的 5,最大的区别:offsetLeft以border左上角为基准, style.left以margin左上角为基准 |
offsetParent | 构成 | 1. 返回该对象距离最近的带有定位的父级元素 2. 如果当前元素的所有父级元素都没有定位(position为absolute或relative),那么offsetParent为body 3. offsetLeft获取的就是相对于offsetParent的距离 |
| 与parentNode的区别 | parentNode始终指向的是当前元素的最近的父元素,无论定位与否 |
延伸:https://blog.csdn.net/csdnxcn/article/details/77886499
1.1 location对象
表示与当前加载的窗口相关的信息,包括url路径等。
属性 | 描述的URL内容 |
host | 设置或返回主机名和当前 URL 的端口号。 |
hostname | 设置或返回当前 URL 的主机名 |
href | 设置或返回完整的 URL |
pathname | 设置或返回当前 URL 的路径部分 |
port | 设置或返回当前 URL 的端口号。默认情况下,大多数URL没有端口信息(默认为80端口)返回为空 |
protocol | 设置或返回当前 URL 的协议,即双斜杠(//)之前的部分 |
search | 设置或返回从问号 (?) 开始的 URL(查询部分)。 |
hash | 设置或返回从井号 (#) 开始的 URL(锚)。 |
origin | 协议名、主机名和端口号。 |
方法 | 功能 |
assign() | 跳转到指定页面,与href等效 |
reload() | 重载当前URL |
repalce() | 用新的URL 替换当前页面,可以避免产生跳转前的历史记录,跳转后浏览器不能返回上一个页面 |
toString() | 获取当前页面的完整URL,相当于location.href |
1.2 navigator对象
关于web浏览器的有关信息,可以用于检测浏览器和操作系统,navigator对象中的属性是只读的。
属性 | 描述内容 |
userAgent | 用户代理头信息,很多时候用于判断浏览器 |
appCodeName | 浏览器代码名 |
appName | 官方浏览器名称,该属性并不一定能返回正确的浏览器名称 |
appVersion | 浏览器版本信息 |
cookieEnabled | 是否使用cookie 值为true/false |
platform | 浏览器所在计算机平台 |
plugins | 浏览器上所安装的插件 数组。 |
onLine | 用户当前在线还是离线(浏览器断线)值为true/false |
cpuClass | 浏览器正在运行的计算机的cpu型号 |
securityPolicy | 浏览器支持的加密类型 |
可以使用navigator.userAgent属性来判断浏览器类型。
var browserName = window.navigator.userAgent.toLowerCase();
if(/mobi/i.test(browserName)){
// 手机浏览器
if(/android/i.test(browserName)){
alert("安卓");
} else if (/iphone/i.test(browserName)){
alert("iPhone");
}
} else {
//非手机浏览器
if(/msie/i.test(browserName) && !/opera/.test(browserName)){
//只能识别到IE10及以下。
alert("IE");
}else if(/edge/i.test(browserName)){
alert('Edge')
}else if(/firefox/i.test(browserName)){
alert("Firefox");
}else if(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)){
alert("Chrome");
}else if(/opera/i.test(browserName)){
alert("Opera");
}else if(/webkit/i.test(browserName) &&!(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))){
alert("Safari");
}else{
alert("unKnow");
}
}
但是用户可以改变这个字符串。这个字符串的格式并无统一规定,也无法保证未来的适用性,各种上网设备层出不穷,难以穷尽。已经基本不使用了。
function isIE() { //ie?
if (!!window.ActiveXObject || "ActiveXObject" in window)
return true;
else
return false;
}
可以使用上面的函数来判断IE浏览器了。
1.3 screen对象
包含了用户显示器屏幕相关信息。通过该对象,可以访问用户显示器屏幕宽、高、色深等信息
属性 | 描述 |
width | 屏幕的宽度 |
height | 屏幕的高度 |
availWidth | 窗口可以使用的屏幕的宽度 |
availHeight | 窗口可以使用的屏幕的高度 |
pixelDepth | 窗口可以使用的屏幕的高度 |
2、window对象的方法
方法 | 功能 |
alert(text) | 创建一个警告对话框,显示一条信息 |
blur() | 将焦点从窗口移除 |
close() | 关闭窗口 |
confirm() | 创建一个需要用户确认的对话框 |
focus() | 将焦点移至窗口 |
open(url,name,[options]) | 打开一个新窗口并返回新window 对象 |
prompt(text,input) | 创建一个对话框要求用户输入信息 |
scroll(x,y) | 在窗口中滚动到一个像素点的位置 |
moveBy(x,y) | 按照给定像素参数移动指定窗口,x,y代表水平位移量和垂直位移量 |
moveTo(x,y) | 将窗口移动到指定的指定坐标(x,y)处 |
resizeBy(x,y) | 将当前窗口改变指定的大小(x,y),当x、y的值大于0时为扩大,小于0时为缩小 |
resizeTo(x,y) | 将当前窗口改变大小,x、y分别为宽度和高度 |
find() | 调出查找对话框 |
setInterval(func,time) | 经过指定时间间执行代码 |
clearInterval("id") | 取消setInterval |
setTimeout(func,time) | 在定时器超过后执行代码 |
clearTimeout("id") | 取消还未执行的setTimeout |
print() | 调出打印对话框 |
下面详细介绍几个常用的
2.1 window.alert()
常用的提示信息,不可以写css样式,可以使用'/n'换行。主要用于调试,现在基本都是使用console。作为用户提示,很不友好。
2.2 window.prompt('提示','值')
输入提示框 返回有三种,确定填写=>值,确定但不填写=>'',取消/关闭=>null
2.3 window.confirm('你确定退出吗?')
提示用户信息,确定=> true , 取消=> false
2.4 window.open(url,'name','type','string')
以type的方式打开名为name的string形式的url网页。
blank | 在一个新的未命名的窗口载入文档 |
_self | 在相同的框架或窗口中载入目标文档 |
_parent | 把文档载入父窗口或包含了超链接引用的框架的框架集 |
_top | 把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架 |
2.5 setTimeout和setInterval
setTimeout(fn,x) x毫秒之后执行 => clearTimeout() 取消
setInterval(fn,x) 每隔x毫秒执行一次 => clearInterval() 取消
function nowTime() {
console.log("this is nowTime");
}
setTimeout(nowTime, 2000);
clearTimeout(nowTime);
function nowTime1() {
console.log("this is nowTime1");
}
setInterval(nowTime1, 2000);
clearInterval(nowTime1);
2.6 window.resizeTo(),window.resizeBy()
都是用于缩小窗口大小,
window.resizeTo(window.screen.availWidth/2,window.screen.availHeight/2) 缩小到 多少
window.resizeBy(-200,-200) 缩小了 多少
<button onclick="openOne()">打开</button>
<button onclick="resize()">缩放</button>
var w;
function openOne(){
//有个很奇怪的问题,如果不写url地址,那就可以被成功缩放,但是写了就不行。很奇怪,求解惑
w=window.open('http://www.baidu.com','', 'width=100,height=100');
w.focus();
}
function resize () {
w.resizeBy(500,500);
w.focus();
}
2.7 window.scrollTo(),window.scrollBy()
window.scrollTo(x,y):用于将文档滚动到指定位置。它接受两个参数,表示滚动后位于窗口左上角的页面坐标。滚动到
window.scrollBy(0,window.innerHeight):用于将网页滚动指定距离(单位像素)。它接受两个参数:水平向右滚动的像素,垂直向下滚动的像素。滚动了
2.8 window.moveTo(),window.moveBy()
window.moveTo() 移动浏览器窗口到指定位置,接受两个参数,分别是窗口左上角距离屏幕左上角的水平距离和垂直距离,单位为像素。 移动到
window.moveBy() 将窗口移动到一个相对位置。它接受两个参数,分布是窗口左上角向右移动的水平距离和向下移动的垂直距离,单位为像素。移动了
2.9 window.focus(),window.blur()
window.focus() 会激活窗口,使其获得焦点,出现在其他窗口的前面
window.blur() 将焦点从窗口移除
over~
拓展:
关注我获取更多前端资源和经验分享
感谢大佬们阅读,希望大家头发浓密,睡眠良好,情绪稳定,早日实现财富自由~