浏览器对象模型 BOM:Browser Object Model
BOM:由一系列的对象组成,每个对象都有自己的属性和方法
用来管理浏览器窗口与窗口之间的通讯.
window是BOM中的顶层(核心)对象,所有的对象都是通过它延伸出来的。
由window延伸出来的子对象
1.document
2.history
3.location
4.navigator
5.screen
6.frames
window窗口对象的特点:
1.所有的全局变量都是window的属性.
2.在使用window的子对象时可以省略window
3.this
a.this在元素的关联事件的触发函数里面,代指的是该元素.
b.this在哪个对象的方法里代指哪个对象
c.在其他位置,this指向window
4.self 在任何地方都指向window
window的方法:
1.写法:
window.open(URL,name,features);
URL: 要打开的网页地址
name: 窗口的名字,可以配合a链接的target实现在新打开的窗口打开的新网址,
如果name相同只会打开一个网页.
features:网页的一些特征
注意:当创建一个新的窗口时,我们现在如果给新窗口一个网络地址
因为域保护的问题,会报错.但是以后再工作过程中我们所有的网页
都是放置在同一个服务器下,不会出现域名不同的情况.
如何解决报错:1.不写新窗口的地址,2.写地址,但是保证与当前的网页域名相同
2.window.close() 关闭一个窗口
3.移动窗口
a.moveTo(x,y);移动到某个位置,相对于整个窗口
b.moveBy(x,y);移动到某个位置,相对于当前自己所在的位置
x>0 右移 x<0 左移
y>0 下移 y<0 上移
4.修改窗口的大小
a.resizeTo(width,height);将对应的窗口设置成width,height,
不能超过屏幕大小
b.resizeBy(width,height);将对应的窗口设置成加上width,
height之后的尺寸
5.设置窗口的滚动
a.scrollTo(x,y) 设置对应窗口的滚动条的位置,
x水平滚动条的位置,y竖直滚动条的位置
b.scrollBy(x,y) 设置对应窗口的滚动条的位置,
x水平方向上的滚动条在当前基础上加x之后的位置,
y竖直方向上的滚动条在当前基础上加y之后的位置,
6.焦点
a.获取焦点:focus
b.失去焦点:blur
7.弹出框
a.alert(message);
8.confirm(question);
9.prompt(question,answer);
//history历史记录,用于控制历史记录
history.length 在同一个窗口连续跳转的次数.
history.forward() 前进一页
history.back() 后退一页
//location;窗口的URL
//navigator,用于检测浏览器和操作系统的信息.
//screen 获取当前显示器的信息
width height 指的是显示器的宽和高
availWidth,availHeight指的是浏览器可用最大宽和高
//location
console.log(location);
console.log("协议:"+location.protocol);
console.log("主机:"+location.host);
console.log("主机名:"+location.hostname);
console.log("端口名:"+location.port);
console.log("文件目录:"+location.pathname);
console.log("参数列表:"+location.search);
//解决toString
console.log(history.toString());
console.log(navigator);
console.log("浏览代码"+navigator.appCodeName);
console.log("浏览器名"+navigator.appName);
console.log("浏览器版本"+navigator.appVersion);
console.log("是否开启cookie:"+navigator.cookieEnabled);
console.log("是否开启java:"+navigator.javaEnabled());
console.log("浏览器所在的计算机平台:"+navigator.platform);
//浏览器安装的插件
console.log(navigator.plugins);
//用户的代理信息,包括硬件平台,系统软件,应用软件,用户个人偏好设置
console.log(navigator.userAgent);
console.log(screen);
//width height 指的是显示器的宽和高
//availWidth,availHeight指的是浏览器可用最大宽和高
//1个像素点所能呈现的颜色的二进制数的最大位数,位数越大,组成的图片的大小就越大
console.log(screen.colorDepth);
console.log(screen.pixelDepth);
console.log(frames);
浏览器嗅探
window.navigator.userAgent:
获取当前html文件运行在浏览器中的浏览器名称以及版本,
我们可以通过"Chrome/Safari/Firefox/IE/Opera"这些关键词
来判断当前用户打开的是哪一种浏览器,进而进行对应的兼容性操作.
var browser = window.navigator.userAgent;
if(browser.indexOf("OPR") != -1){
console.log('是欧鹏浏览器');
}else if( browser.indexOf("Chrome") != -1){
console.log('是谷歌浏览器');
}else if(browser.indexOf("Safari") != -1){
console.log('是Safari浏览器');
}else if(browser.indexOf("Firefox")){
console.log("是火狐浏览器");
}else if(browser.indexOf("Trident")){
console.log("是IE浏览器");
}