1.window對象

window有雙重角色：既是通過javascript訪問瀏覽器窗口的一個接口，又是ES規(guī)定的Global對象。

1.1 窗口關(guān)系及框架

如果頁面中包含框架，則每個框架都擁有自己的window對象，并且保存在frames集合中，可以通過數(shù)值索引或者根據(jù)框架名稱來訪問相應(yīng)的window對象。

通過代碼訪問每個框架，最好使用top.frames[0]的方式，因?yàn)閠op對象始終指向最外層的框架。

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坐標(biāo)值
moveBy（）接收的是水平和垂直方向移動的像素?cái)?shù)。

//移動到屏幕左上角
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中這些屬性在標(biāo)準(zhǔn)模式才有效，混雜模式：document.body.clientWidth、document.body.clientHeight

let pageWidth=window.innerWidth,
     pageHeight=window.innerHeight;
//如果瀏覽器沒有window.innerWidth屬性
if(typeof pageWidth !="number"){
   //如果是標(biāo)準(zhǔn)模式
   if(document.compatMode=="CSSlCompat"){
       pageWidth=document.documentElement.clientWidth；
       pageHeight=document.documentElement.clientHeight；
  }else{
    //如果是混雜模式
    pageWidth=document.body.clientWidth；
    pageHeight=document.body.clientHeight；
 }
}

1.4.導(dǎo)航和打開窗口

window.open()方法，這個方法可以接收4個參數(shù)。
要加載的URl、窗口目標(biāo)、一個特性字符串、一個表示新頁面是否取代瀏覽器歷史幾種中當(dāng)前加載頁面的布爾值。
通常只需傳遞一個參數(shù)，最后一個參數(shù)只在不打開新窗口的情況下使用。

第三個參數(shù)是一個逗號分隔的設(shè)置字符串，表示在新窗口都顯示哪些特性。

1.5 間歇調(diào)用和超時調(diào)用

• 1）超時調(diào)用：指定時間過后執(zhí)行代碼

超時調(diào)用需要使用window對象的setTimeout()方法，它接收兩個參數(shù)：要執(zhí)行的代碼、以毫秒表示的時間，
會返回一個唯一的id

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

//取消超時調(diào)用
clearTimeout(timeoutId);

只要是在指定的時間尚未過去之前調(diào)用clearTimeout(),就可以完全取消超時調(diào)用。上述代碼在設(shè)置超時調(diào)用之后又馬上調(diào)用了clearTimeout(),結(jié)果就什么也沒有發(fā)生。

• 2）間歇調(diào)用：按照指定的時間間隔重復(fù)執(zhí)行代碼，直至間歇調(diào)用被取消或者頁面被卸載。

setInterval(),接收參數(shù)與超時調(diào)用相同。

let num=0;
let max=10;
let intervalId;
intervalId=setInterval(incrementNumber,500);
function incrementNumber(){
  num++;
  if(num==max){
   //如果num達(dá)到最大值，取消間歇調(diào)用
   clearInterval(intervalId);
   alert("Done");
  }
}

間歇調(diào)用可以使用超時調(diào)用實(shí)現(xiàn)：

let num=0;
let max=10;
let timeoutId;
timeoutId=setTimeout(incrementNumber,500);
function incrementNumber(){
  num++;
if(num<max){
   setTimeout(incrementNumber,500);
}else{
   //如果num達(dá)到最大值，取消超時調(diào)用
   clearTimeout(timeoutId);
   alert("Done");
  }
}

1.6 系統(tǒng)對話框

alert()方法

alert("Hello world!");

confirm()方法

confirm("are you sure?");

prompt()方法：提示框，用于提示用戶輸入一些文本。
提示框除了顯示OK和Cancel按鈕之外，還會顯示一個文本輸入域，供用戶在其中輸入內(nèi)容。
接收兩個參數(shù)：顯示給用戶的文本提示和文本輸入域的默認(rèn)值
返回：用戶單機(jī)OK，返回文本輸入域的值；如果取消或關(guān)閉，返回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 查詢字符串參數(shù)

  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 網(wǎng)址操作

assign()方法改變網(wǎng)址
location.assign（“http://www.baidu.com”）;
使用location.href和window.location設(shè)置URL值，也會調(diào)用assign()方法。

2.3.reload()方法

3.navigator對象

用于檢測顯示網(wǎng)頁的瀏覽器類型。

4.screen對象

5.history對象

history對象保存著用戶上網(wǎng)的歷史紀(jì)錄，從窗口被打開那一刻起。因?yàn)閔istory是window對象的屬性，因此每個瀏覽器窗口、每個框架都有自己的history對象。出于安全考慮，開發(fā)人員無法得知用戶瀏覽過的url，不過可以借由用戶訪問過的頁面列表，在不知道URL的情況下實(shí)現(xiàn)前進(jìn)后退。

前進(jìn)后退

• go()方法

//參數(shù)是負(fù)數(shù)，后退
history.go(-1);
//參數(shù)是正數(shù),前進(jìn)正數(shù)頁，這里1頁
history.go(1);
//前進(jìn)2頁
history.go(2);
//參數(shù)是字符串，跳轉(zhuǎn)到歷史紀(jì)錄中包含該字符串的第一個位置
history.go("wrox.com");

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

//前進(jìn)一頁
history.forward();
//后退一頁
history.back();