浏览器对象模型是以window对象为依托的，window在ES中是全局对象，因而所有的全局变量和函数都是它的属性，并且所有的原生的构造函数也都在它的命名空间下。
1. window对象：
A. BOM的核心对象；
同时扮演着全局对象的角色。
全局变量与window对象上定义的属性区别：全局变量不能通过delete删除
var age=29;
window.color="red";
delete window.age;
delete window.color;
console.log(age);//29
console.log(window.color); //undefined
B. 窗口位置
a.窗口相对于屏幕左边和上边的位置：
screenLeft, screenTop; //IE Safari Opera Chrome
screenX, screenY; //Safari Chrome Firefox
var leftPos=(typeof window.screenLeft == "number")? window.screenLeft : window.screenX;
var topPos=(typeof window.screenTop == "number")? window.screenTop : window.screenY;
b.窗口精确地移动到某个位置：
window.moveBy(0,100) //移动了
window.moveTo(0,100) //移动到
C. 窗口大小：
a.跨浏览器确定窗口大小不是一件简单的事情，因为浏览器的原因，但是可以确定页面视口的大小（去掉边框）：
var pageWidth=window.innerWidth;
var pageHight=window.innerHeight;
if(typeof pageWidth != "number"){
if(document.compatMode == "CSS1Compat"){ //标准模式
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
}
else{ //混杂模式
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
b.调整窗口大小：
window.resizeTo(100,100);
window.resizeBy(100,100);
D. 导航和打开窗口：
window.open() //打开一个新的浏览器窗口
E. 间歇调用setInterval和超时调用setTimeout
a.超时调用：每个超时调用都有一个唯一的数值ID，可以通过该ID来取消超时调用。
var timeoutId = setTimeout(function(){
alert("hello");
},1000);
取消clearTimeout(timeoutId)//在指定的时间尚未过去之前取消超时调用，会导致setTimeout里面的function代码没有执行。
b.间歇调用：直到间歇调用被取消或者页面卸载才会停止。该方法也有其ID。
var num =0;
var max = 10;
var intervalId = null;
function incrementNumber(){
num++;
if(num == max){
clearInterval(intervalId);
}
else{
console.log(num); //1-9
}
}
intervalId = setInterval(incrementNumber,1000)
很少真正使用间歇调用，可以使用超时调用来模拟间歇调用，间歇调用缺点：
1.后一个间歇调用有可能会在前一个间歇调用结束之前启动；
2.间歇调用需要追踪其ID，以便于取消间歇调用。
var num =0;
var max = 10;
var intervalId = null;
function incrementNumber(){
num++;
//如果执行次数未达到设定的值，则设置另一次超时调用
if(num < max){
console.log(num);
setTimeout(incrementNumber,1000);
}
}
intervalId = setTimeout(incrementNumber,1000);
F. 系统对话框：
1.alert() （用户无法控制的对话框，警告作用）
2.confirm() （用户可以选择是否执行操作）
if(confirm("你确定进入下一页吗？")){
alert("欢迎")
}
else{
alert("再见")
}
Paste_Image.png
3.prompt() （用户可以输入文本）
var result=prompt("你叫什么名字？","");
if(result != null){
alert("欢迎，"+result);
}
Paste_Image.png
2. location对象
a. location对象提供了当前页面的与文档有关的信息。它既是window的属性，又是document的属性，即window.location==document.location.
b. 作用：解析Url，将Url解析为独立的片段。可以通过location的不同属性访问url中的不同信息（hash host hostname href pathname port protocol search）
c.获取url中的参数：
function getQueryStringArgs() {
var qs=location.search.length>0? location.search.substring(1):"";
var args={};
var items=qs.length ? qs.split("&"):[];
var item=null,name=null,value=null;
for(var i=0;i<items.length;i++){
item=items[i].split("=");
name=decodeURIComponent(item[0]);
value=decodeURIComponent(item[1]);
if(name.length){
args[name]=value;
}
}
return args;
}
d. 位置操作：
打开新的URL地址并且在浏览器的历史记录中生成记录（可后退）
location.href="http://baidu.com"
window.location="http://baidu.com"
location.assign("http://baidu.com")
打开新的URL并且不生成记录（不可后退）
location.replace("http://baidu.com")
重新加载页面：reload
location.reload() //有可能加载浏览器缓存页面
location.reload(true) //重新从服务器进行请求
3. navigator对象
主要作用：识别客户端浏览器
a. 检测插件：plugins数组中包含插件的各种信息。
//非ie浏览器有效，因为navigator是NS开发的，IE不支持。
function hasPlugin(name) {
name=name.toLowerCase();
for(var i=0;i<navigator.plugins.length;i++){
if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1){
return true;
}
}
return false;
}
console.log(hasPlugin("flash"));
ie浏览器需要利用COM对象来进行检测。
4. screen对象
主要用于表示浏览器窗口信息。比如调整窗口大小时：
window.resizeTo(screen.availWidth,screen.availHeight)
5. history对象：
保存上网的历史记录。
作用：创建前进后退按钮，以及检测当前页面是否是用户打开的第一个页面。
常见用法：
history.go(1);
history.go(-1);
history.forward();
history.back();
history.go("wrox.com");
if(history.length==0){
console.log("用户访问的第一个页面")
}
网友评论