07.第8章：BOM

1.window对象

window有双重角色：既是通过javascript访问浏览器窗口的一个接口，又是ES规定的Global对象。

1.1 窗口关系及框架

如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中，可以通过数值索引或者根据框架名称来访问相应的window对象。

通过代码访问每个框架，最好使用top.frames[0]的方式，因为top对象始终指向最外层的框架。

1.2 窗口位置

窗口相对于屏幕左边和上边的位置
IE、Safari、Opera、Chrome提供：screenLeft、screenTop属性
FireFox、Safari、Opera、：screenX、screenY属性

let leftPos=(typeof window.screenLeft=="number")?window.screenLeft:window.screenX;
let topPos=(typeof window.screenTop=="number")?window.screenTop:window.screenY;

无法在跨浏览器的条件下取得窗口左边和上边的精确值。
使用moveTo()和moveBy()方法可以将窗口精确地移动到一个新位置。
moveTo（）接收的是新位置的x，y坐标值
moveBy（）接收的是水平和垂直方向移动的像素数。

//移动到屏幕左上角
window.moveTo（0，0）；
//将窗口移动到（200，300）的位置
window.moveTo(200,300)；
//将窗口向下移动100px
window.moveBy(0,100);
//将窗口向左移动50px
window.moveBy(-50，0);

注意：在Opera和IE7及以上版本被禁用
不适用于框架，只能对最外层的window对象使用。

1.3 窗口大小

最终无法确定浏览器窗口本身的大小，但可以取得页面视口的大小
IE9+、Firefox、safari、Opera和Chrome提供了四个属性：innerWidth、innerHeight、outerWidth、outerHeight
IE8及早期版本、Firefox、safari、Opera和Chrome：document.documentElement.clientWidth、
document.documentElement.clientHeight属性
IE6中这些属性在标准模式才有效，混杂模式：document.body.clientWidth、document.body.clientHeight

let pageWidth=window.innerWidth,
     pageHeight=window.innerHeight;
//如果浏览器没有window.innerWidth属性
if(typeof pageWidth !="number"){
   //如果是标准模式
   if(document.compatMode=="CSSlCompat"){
       pageWidth=document.documentElement.clientWidth；
       pageHeight=document.documentElement.clientHeight；
  }else{
    //如果是混杂模式
    pageWidth=document.body.clientWidth；
    pageHeight=document.body.clientHeight；
 }
}

1.4.导航和打开窗口

window.open()方法，这个方法可以接收4个参数。
要加载的URl、窗口目标、一个特性字符串、一个表示新页面是否取代浏览器历史几种中当前加载页面的布尔值。
通常只需传递一个参数，最后一个参数只在不打开新窗口的情况下使用。

第三个参数是一个逗号分隔的设置字符串，表示在新窗口都显示哪些特性。

1.5 间歇调用和超时调用

• 1）超时调用：指定时间过后执行代码

超时调用需要使用window对象的setTimeout()方法，它接收两个参数：要执行的代码、以毫秒表示的时间，
会返回一个唯一的id

//1000ms
let timeoutId=setTimeout(function(){
    alert(“Hello world！”);
},1000);

//取消超时调用
clearTimeout(timeoutId);

只要是在指定的时间尚未过去之前调用clearTimeout(),就可以完全取消超时调用。上述代码在设置超时调用之后又马上调用了clearTimeout(),结果就什么也没有发生。

• 2）间歇调用：按照指定的时间间隔重复执行代码，直至间歇调用被取消或者页面被卸载。

setInterval(),接收参数与超时调用相同。

let num=0;
let max=10;
let intervalId;
intervalId=setInterval(incrementNumber,500);
function incrementNumber(){
  num++;
  if(num==max){
   //如果num达到最大值，取消间歇调用
   clearInterval(intervalId);
   alert("Done");
  }
}

间歇调用可以使用超时调用实现：

let num=0;
let max=10;
let timeoutId;
timeoutId=setTimeout(incrementNumber,500);
function incrementNumber(){
  num++;
if(num<max){
   setTimeout(incrementNumber,500);
}else{
   //如果num达到最大值，取消超时调用
   clearTimeout(timeoutId);
   alert("Done");
  }
}

1.6 系统对话框

alert()方法

alert("Hello world!");

confirm()方法

confirm("are you sure?");

prompt()方法：提示框，用于提示用户输入一些文本。
提示框除了显示OK和Cancel按钮之外，还会显示一个文本输入域，供用户在其中输入内容。
接收两个参数：显示给用户的文本提示和文本输入域的默认值
返回：用户单机OK，返回文本输入域的值；如果取消或关闭，返回null。

let result=prompt("What is your name?","Michael");
if(result!=null){
  alert("Welcome "+ result);
}

window.print():显示打印对话框
window.find():显示查找对话框

2.location对象

既是window对象的属性，也是document对象的属性，window.location和document.location引用的是同一个对象。

2.1 查询字符串参数

  function getQueryStringArgs(){
//获取去掉？之后的查询字符串
  let str=location.search.length>0?location.search.substring(1) : "");
//将字符串按照&划分开  
let items=str.length>0?str.split("&") : [];
let item,name,value;
let args={};//定义字面量对象
for(let i=0;i<items.length;i++){
    //将=左右两边分开
    item=items[i].split("=");
   name=decodeURIComponent(item[0]);
   value=decodeURIComponent(item[1]);
   if(name.length>0)
      args[name]=value; //将key，value放入args。
  }
  return args；
}

2.2 网址操作

assign()方法改变网址
location.assign（“http://www.baidu.com”）;
使用location.href和window.location设置URL值，也会调用assign()方法。

2.3.reload()方法

3.navigator对象

用于检测显示网页的浏览器类型。

4.screen对象

5.history对象

history对象保存着用户上网的历史纪录，从窗口被打开那一刻起。因为history是window对象的属性，因此每个浏览器窗口、每个框架都有自己的history对象。出于安全考虑，开发人员无法得知用户浏览过的url，不过可以借由用户访问过的页面列表，在不知道URL的情况下实现前进后退。

前进后退

• go()方法

//参数是负数，后退
history.go(-1);
//参数是正数,前进正数页，这里1页
history.go(1);
//前进2页
history.go(2);
//参数是字符串，跳转到历史纪录中包含该字符串的第一个位置
history.go("wrox.com");

• 使用back()和forward()代替go()

//前进一页
history.forward();
//后退一页
history.back();