概述

在瀏覽器中舵变，window對象（注意矢否，w為小寫）指當(dāng)前的瀏覽器窗口。它也是所有對象的頂層對象勒虾。

“頂層對象”指的是最高一層的對象雀彼，所有其他對象都是它的下屬壤蚜。JavaScript規(guī)定，瀏覽器環(huán)境的所有全局變量徊哑，都是window對象的屬性袜刷。

var a = 1;
window.a // 1

上面代碼中，變量a是一個全局變量莺丑，但是實(shí)質(zhì)上它是window對象的屬性著蟹。聲明一個全局變量，就是為window對象的同名屬性賦值梢莽。

從語言設(shè)計的角度看萧豆，所有變量都是window對象的屬性，其實(shí)不是很合理昏名。因?yàn)?code>window對象有自己的實(shí)體含義涮雷，不適合當(dāng)作最高一層的頂層對象。這個設(shè)計失誤與JavaScript語言匆忙的設(shè)計過程有關(guān)轻局，最早的設(shè)想是語言內(nèi)置的對象越少越好洪鸭，這樣可以提高瀏覽器的性能。因此仑扑，語言設(shè)計者Brendan Eich就把window對象當(dāng)作頂層對象览爵，所有未聲明就賦值的變量都自動變成window對象的屬性。這種設(shè)計使得編譯階段無法檢測出未聲明變量镇饮，但到了今天已經(jīng)沒有辦法糾正了蜓竹。

window對象的屬性

window.window，window.name

window對象的window屬性指向自身盒让。

window.window === this // true

window.name屬性用于設(shè)置當(dāng)前瀏覽器窗口的名字梅肤。

window.name = 'Hello World!';
console.log(window.name)
// "Hello World!"

各個瀏覽器對這個值的儲存容量有所不同，但是一般來說邑茄，可以高達(dá)幾MB。

該屬性只能保存字符串俊啼，且當(dāng)瀏覽器窗口關(guān)閉后肺缕，所保存的值就會消失。因此局限性比較大，但是與<iframe>窗口通信時同木，非常有用浮梢。

window.location

window.location返回一個location對象，用于獲取窗口當(dāng)前的URL信息彤路。它等同于document.location對象秕硝，詳細(xì)介紹見《document對象》一節(jié)。

window.location === document.location // true

window.closed洲尊，window.opener

window.closed屬性返回一個布爾值远豺，表示窗口是否關(guān)閉。

window.closed // false

上面代碼檢查當(dāng)前窗口是否關(guān)閉坞嘀。這種檢查意義不大躯护，因?yàn)橹灰苓\(yùn)行代碼，當(dāng)前窗口肯定沒有關(guān)閉丽涩。這個屬性一般用來檢查棺滞，使用腳本打開的新窗口是否關(guān)閉。

var popup = window.open();

if ((popup !== null) && !popup.closed) {
  // 窗口仍然打開著
}

window.opener屬性返回打開當(dāng)前窗口的父窗口矢渊。如果當(dāng)前窗口沒有父窗口继准，則返回null。

window.open().opener === window // true

上面表達(dá)式會打開一個新窗口矮男，然后返回true锰瘸。

通過opener屬性，可以獲得父窗口的的全局變量和方法昂灵，比如window.opener.propertyName和window.opener.functionName()避凝。但這只限于兩個窗口屬于同源的情況（參見《同源政策》一節(jié)），且其中一個窗口由另一個打開眨补。

window.frames管削，window.length

window.frames屬性返回一個類似數(shù)組的對象，成員為頁面內(nèi)所有框架窗口撑螺，包括frame元素和iframe元素含思。window.frames[0]表示頁面中第一個框架窗口。

如果iframe元素設(shè)置了id或name屬性甘晤，那么就可以用屬性值含潘，引用這個iframe窗口。比如<iframe name="myIFrame">就可以用frames['myIFrame']或者frames.myIFrame來引用线婚。

frames屬性實(shí)際上是window對象的別名遏弱。

frames === window // true

因此，frames[0]也可以用window[0]表示塞弊。但是漱逸，從語義上看泪姨，frames更清晰，而且考慮到window還是全局對象饰抒，因此推薦表示多窗口時肮砾，總是使用frames[0]的寫法。更多介紹請看下文的《多窗口操作》部分袋坑。

window.length屬性返回當(dāng)前網(wǎng)頁包含的框架總數(shù)仗处。如果當(dāng)前網(wǎng)頁不包含frame和iframe元素，那么window.length就返回0枣宫。

window.frames.length === window.length // true

window.frames.length與window.length應(yīng)該是相等的婆誓。

window.screenX，window.screenY

window.screenX和window.screenY屬性镶柱，返回瀏覽器窗口左上角相對于當(dāng)前屏幕左上角（(0, 0)）的水平距離和垂直距離旷档，單位為像素。

window.innerHeight歇拆，window.innerWidth

window.innerHeight和window.innerWidth屬性鞋屈，返回網(wǎng)頁在當(dāng)前窗口中可見部分的高度和寬度，即“視口”（viewport）故觅，單位為像素厂庇。

當(dāng)用戶放大網(wǎng)頁的時候（比如將網(wǎng)頁從100%的大小放大為200%），這兩個屬性會變小输吏。因?yàn)檫@時網(wǎng)頁的像素大小不變（比如寬度還是960像素）权旷，只是每個像素占據(jù)的屏幕空間變大了，因?yàn)榭梢姴糠郑ㄒ暱冢┚妥冃×恕?/p>

注意贯溅，這兩個屬性值包括滾動條的高度和寬度拄氯。

window.outerHeight，window.outerWidth

window.outerHeight和window.outerWidth屬性返回瀏覽器窗口的高度和寬度它浅，包括瀏覽器菜單和邊框译柏，單位為像素。

window.pageXOffset姐霍，window.pageYOffset

window.pageXOffset屬性返回頁面的水平滾動距離鄙麦，window.pageYOffset屬性返回頁面的垂直滾動距離，單位都為像素镊折。

舉例來說胯府，如果用戶向下拉動了垂直滾動條75像素，那么window.pageYOffset就是75恨胚。用戶水平向右拉動水平滾動條200像素骂因，window.pageXOffset就是200。

navigator對象

window對象的navigator屬性与纽，指向一個包含瀏覽器信息的對象侣签。

navigator.userAgent

navigator.userAgent屬性返回瀏覽器的User-Agent字符串塘装，標(biāo)示瀏覽器的廠商和版本信息急迂。

下面是Chrome瀏覽器的userAgent影所。

navigator.userAgent
// "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36"

通過userAgent屬性識別瀏覽器，不是一個好辦法僚碎。因?yàn)楸仨毧紤]所有的情況（不同的瀏覽器猴娩，不同的版本），非常麻煩勺阐，而且無法保證未來的適用性卷中，更何況各種上網(wǎng)設(shè)備層出不窮，難以窮盡渊抽。所以蟆豫，現(xiàn)在一般不再識別瀏覽器了，而是使用“功能識別”方法懒闷，即逐一測試當(dāng)前瀏覽器是否支持要用到的JavaScript功能十减。

不過，通過userAgent可以大致準(zhǔn)確地識別手機(jī)瀏覽器愤估，方法就是測試是否包含mobi字符串帮辟。

var ua = navigator.userAgent.toLowerCase();

if (/mobi/i.test(ua)) {
  // 手機(jī)瀏覽器
} else {
  // 非手機(jī)瀏覽器
}

如果想要識別所有移動設(shè)備的瀏覽器，可以測試更多的特征字符串玩焰。

/mobi|android|touch|mini/i.test(ua)

navigator.plugins

navigator.plugins屬性返回一個類似數(shù)組的對象由驹，成員是瀏覽器安裝的插件，比如Flash昔园、ActiveX等蔓榄。

navigator.platform

navigator.platform屬性返回用戶的操作系統(tǒng)信息。

navigator.platform
// "Linux x86_64"

navigator.onLine

navigator.onLine屬性返回一個布爾值默刚，表示用戶當(dāng)前在線還是離線甥郑。

navigator.onLine // true

navigator.geolocation

navigator.geolocation返回一個Geolocation對象，包含用戶地理位置的信息羡棵。

navigator.javaEnabled()壹若，navigator.cookieEnabled

javaEnabled方法返回一個布爾值，表示瀏覽器是否能運(yùn)行Java Applet小程序皂冰。

navigator.javaEnabled() // false

cookieEnabled屬性返回一個布爾值店展，表示瀏覽器是否能儲存Cookie。

navigator.cookieEnabled // true

注意秃流，這個返回值與是否儲存某個網(wǎng)站的Cookie無關(guān)赂蕴。用戶可以設(shè)置某個網(wǎng)站不得儲存Cookie，這時cookieEnabled返回的還是true舶胀。

window.screen對象

window.screen對象包含了顯示設(shè)備的信息概说。

screen.height和screen.width兩個屬性碧注，一般用來了解設(shè)備的分辨率。

// 顯示設(shè)備的高度糖赔，單位為像素
screen.height // 1920

// 顯示設(shè)備的寬度萍丐，單位為像素
screen.width // 1080

上面代碼顯示，某設(shè)備的分辨率是1920x1080放典。

除非調(diào)整顯示器的分辨率逝变，否則這兩個值可以看作常量，不會發(fā)生變化奋构。顯示器的分辨率與瀏覽器設(shè)置無關(guān)壳影，縮放網(wǎng)頁并不會改變分辨率。

下面是根據(jù)屏幕分辨率弥臼，將用戶導(dǎo)向不同網(wǎng)頁的代碼宴咧。

if ((screen.width <= 800) && (screen.height <= 600)) {
  window.location.replace('small.html');
} else {
  window.location.replace('wide.html');
}

screen.availHeight和screen.availWidth屬性返回屏幕可用的高度和寬度，單位為像素径缅。它們的值為屏幕的實(shí)際大小減去操作系統(tǒng)某些功能占據(jù)的空間掺栅，比如系統(tǒng)的任務(wù)欄。

screen.colorDepth屬性返回屏幕的顏色深度芥驳，一般為16（表示16-bit）或24（表示24-bit）柿冲。

window對象的方法

window.moveTo()，window.moveBy()

window.moveTo方法用于移動瀏覽器窗口到指定位置兆旬。它接受兩個參數(shù)假抄，分別是窗口左上角距離屏幕左上角的水平距離和垂直距離，單位為像素丽猬。

window.moveTo(100, 200)

上面代碼將窗口移動到屏幕(100, 200)的位置宿饱。

window.moveBy方法將窗口移動到一個相對位置。它接受兩個參數(shù)脚祟，分布是窗口左上角向右移動的水平距離和向下移動的垂直距離谬以，單位為像素。

window.moveBy(25, 50)

上面代碼將窗口向右移動25像素由桌、向下移動50像素为黎。

window.scrollTo()，window.scrollBy()

window.scrollTo方法用于將網(wǎng)頁的指定位置行您，滾動到瀏覽器左上角铭乾。它的參數(shù)是相對于整張網(wǎng)頁的橫坐標(biāo)和縱坐標(biāo)。它有一個別名window.scroll娃循。

window.scrollTo(0, 1000);

window.scrollBy方法用于將網(wǎng)頁移動指定距離炕檩，單位為像素。它接受兩個參數(shù)：向右滾動的像素捌斧，向下滾動的像素笛质。

window.scrollBy(0, window.innerHeight)

上面代碼用于將網(wǎng)頁向下滾動一屏泉沾。

window.open(), window.close()

window.open方法用于新建另一個瀏覽器窗口，并且返回該窗口對象妇押。

var popup = window.open('somefile.html');

上面代碼會讓瀏覽器彈出一個新建窗口跷究，網(wǎng)址是當(dāng)前域名下的somefile.html。

open方法一共可以接受四個參數(shù)舆吮。

• 第一個參數(shù)：字符串揭朝，表示新窗口的網(wǎng)址队贱。如果省略色冀，默認(rèn)網(wǎng)址就是about:blank。
• 第二個參數(shù)：字符串柱嫌，表示新窗口的名字锋恬。如果該名字的窗口已經(jīng)存在，則跳到該窗口编丘，不再新建窗口与学。如果省略，就默認(rèn)使用_blank嘉抓，表示新建一個沒有名字的窗口索守。
• 第三個參數(shù)：字符串，內(nèi)容為逗號分隔的鍵值對抑片，表示新窗口的參數(shù)卵佛，比如有沒有提示欄、工具條等等敞斋。如果省略截汪，則默認(rèn)打開一個完整UI的新窗口。
• 第四個參數(shù)：布爾值植捎，表示第一個參數(shù)指定的網(wǎng)址衙解，是否應(yīng)該替換history對象之中的當(dāng)前網(wǎng)址記錄，默認(rèn)值為false焰枢。顯然蚓峦，這個參數(shù)只有在第二個參數(shù)指向已經(jīng)存在的窗口時，才有意義济锄。

下面是一個例子暑椰。

var popup = window.open(
  'somepage.html',
  'DefinitionsWindows',
  'height=200,width=200,location=no,status=yes,resizable=yes,scrollbars=yes'
);

上面代碼表示，打開的新窗口高度和寬度都為200像素拟淮，沒有地址欄和滾動條干茉，但有狀態(tài)欄，允許用戶調(diào)整大小很泊。

注意角虫，如果在第三個參數(shù)中設(shè)置了一部分參數(shù)沾谓，其他沒有被設(shè)置的yes/no參數(shù)都會被設(shè)成no，只有titlebar和關(guān)閉按鈕除外（它們的值默認(rèn)為yes）戳鹅。

另外均驶，open方法的第二個參數(shù)雖然可以指定已經(jīng)存在的窗口，但是不等于可以任意控制其他窗口枫虏。為了防止被不相干的窗口控制妇穴，瀏覽器只有在兩個窗口同源，或者目標(biāo)窗口被當(dāng)前網(wǎng)頁打開的情況下隶债，才允許open方法指向該窗口腾它。

open方法返回新窗口的引用。

var windowB = window.open('windowB.html', 'WindowB');
windowB.window.name // "WindowB"

下面是另一個例子死讹。

var w = window.open();
w.alert('已經(jīng)打開新窗口');
w.location = 'http://example.com';

上面代碼先打開一個新窗口瞒滴，然后在該窗口彈出一個對話框，再將網(wǎng)址導(dǎo)向[example.com](http://example.com/)赞警。

由于open這個方法很容易被濫用妓忍，許多瀏覽器默認(rèn)都不允許腳本自動新建窗口。只允許在用戶點(diǎn)擊鏈接或按鈕愧旦，腳本做出反應(yīng)世剖，彈出新窗口。因此笤虫，有必要檢查一下打開新窗口是否成功旁瘫。

if (popup === null) {
  // 新建窗口失敗
}

window.close方法用于關(guān)閉當(dāng)前窗口，一般用來關(guān)閉window.open方法新建的窗口耕皮。

popup.close()

該方法只對頂層窗口有效境蜕，iframe框架之中的窗口使用該方法無效。

window.print()

print方法會跳出打印對話框凌停，同用戶點(diǎn)擊菜單里面的“打印”命令效果相同粱年。

頁面上的打印按鈕代碼如下。

document.getElementById('printLink').onclick = function() {
  window.print();
}

非桌面設(shè)備（比如手機(jī)）可能沒有打印功能罚拟，這時可以這樣判斷台诗。

if (typeof window.print === 'function') {
  // 支持打印功能
}

window.getComputedStyle()

getComputedStyle方法接受一個HTML元素作為參數(shù)，返回一個包含該HTML元素的最終樣式信息的對象赐俗。詳見《DOM》一章的CSS章節(jié)拉队。

window.matchMedia()

window.matchMedia方法用來檢查CSS的mediaQuery語句。詳見《DOM》一章的CSS章節(jié)阻逮。

window.focus()

focus方法會激活指定當(dāng)前窗口粱快，使其獲得焦點(diǎn)。

var popup = window.open('popup.html', 'Popup Window');

if ((popup !== null) && !popup.closed) {
  popup.focus();
}

上面代碼先檢查popup窗口是否依然存在，確認(rèn)后激活該窗口事哭。

當(dāng)前窗口獲得焦點(diǎn)時漫雷，會觸發(fā)focus事件；當(dāng)前窗口失去焦點(diǎn)時鳍咱，會觸發(fā)blur事件降盹。

window.getSelection()

window.getSelection方法返回一個Selection對象，表示用戶現(xiàn)在選中的文本谤辜。

var selObj = window.getSelection();

使用Selction對象的toString方法可以得到選中的文本蓄坏。

var selectedText = selObj.toString();

多窗口操作

由于網(wǎng)頁可以使用iframe元素，嵌入其他網(wǎng)頁丑念，因此一個網(wǎng)頁之中會形成多個窗口涡戳。另一情況是，子網(wǎng)頁之中又嵌入別的網(wǎng)頁渠欺，形成多級窗口妹蔽。

窗口的引用

各個窗口之中的腳本，可以引用其他窗口挠将。瀏覽器提供了一些特殊變量，用來返回其他窗口编整。

• top：頂層窗口舔稀，即最上層的那個窗口
• parent：父窗口
• self：當(dāng)前窗口，即自身

下面代碼可以判斷掌测，當(dāng)前窗口是否為頂層窗口内贮。

top === self

// 更好的寫法
window.top === window.self

下面的代碼讓父窗口的訪問歷史后退一次。

parent.history.back();

與這些變量對應(yīng)汞斧，瀏覽器還提供一些特殊的窗口名夜郁，供open方法、<a>標(biāo)簽粘勒、<form>標(biāo)簽等引用竞端。

• _top：頂層窗口
• _parent：父窗口
• _blank：新窗口

下面代碼就表示在頂層窗口打開鏈接。

<a href="somepage.html" target="_top">Link</a>

iframe標(biāo)簽

對于iframe嵌入的窗口庙睡，document.getElementById方法可以拿到該窗口的DOM節(jié)點(diǎn)事富，然后使用contentWindow屬性獲得iframe節(jié)點(diǎn)包含的window對象，或者使用contentDocument屬性獲得包含的document對象乘陪。

var frame = document.getElementById('theFrame');
var frameWindow = frame.contentWindow;

// 等同于 frame.contentWindow.document
var frameDoc = frame.contentDocument;

// 獲取子窗口的變量和屬性
frameWindow.function()

// 獲取子窗口的標(biāo)題
frameWindow.title

iframe元素遵守同源政策统台，只有當(dāng)父頁面與框架頁面來自同一個域名，兩者之間才可以用腳本通信啡邑，否則只有使用window.postMessage方法贱勃。

iframe窗口內(nèi)部，使用window.parent引用父窗口。如果當(dāng)前頁面沒有父窗口贵扰，則window.parent屬性返回自身族展。因此，可以通過window.parent是否等于window.self拔鹰，判斷當(dāng)前窗口是否為iframe窗口仪缸。

if (window.parent !== window.self) {
  // 當(dāng)前窗口是子窗口
}

iframe嵌入窗口的window對象，有一個frameElement屬性列肢，返回它在父窗口中的DOM節(jié)點(diǎn)恰画。對于那么非嵌入的窗口，該屬性等于null瓷马。

var f1Element = document.getElementById('f1');
var fiWindow = f1Element.contentWindow;
f1Window.frameElement === f1Element // true
window.frameElement === null // true

frames屬性

window對象的frames屬性返回一個類似數(shù)組的對象拴还，成員是所有子窗口的window對象∨菲福可以使用這個屬性片林，實(shí)現(xiàn)窗口之間的互相引用。比如怀骤，frames[0]返回第一個子窗口费封，frames[1].frames[2]返回第二個子窗口內(nèi)部的第三個子窗口，parent.frames[1]返回父窗口的第二個子窗口蒋伦。

需要注意的是弓摘，window.frames每個成員的值，是框架內(nèi)的窗口（即框架的window對象）痕届，而不是iframe標(biāo)簽在父窗口的DOM節(jié)點(diǎn)韧献。如果要獲取每個框架內(nèi)部的DOM樹，需要使用window.frames[0].document的寫法研叫。

另外锤窑，如果iframe元素設(shè)置了name或id屬性，那么屬性值會自動成為全局變量嚷炉，并且可以通過window.frames屬性引用渊啰，返回子窗口的window對象。

// HTML代碼為<iframe id="myFrame">
myFrame // [HTMLIFrameElement]
frames.myframe === myFrame // true

另外渤昌，name屬性的值會自動成為子窗口的名稱虽抄，可以用在window.open方法的第二個參數(shù)，或者<a>和<frame>標(biāo)簽的target屬性独柑。

事件

window對象可以接收以下事件迈窟。

load事件和onload屬性

load事件發(fā)生在文檔在瀏覽器窗口加載完畢時。window.onload屬性可以指定這個事件的回調(diào)函數(shù)忌栅。

window.onload = function() {
  var elements = document.getElementsByClassName('example');
  for (var i = 0; i < elements.length; i++) {
    var elt = elements[i];
    // ...
  }
};

上面代碼在網(wǎng)頁加載完畢后车酣，獲取指定元素并進(jìn)行處理曲稼。

error事件和onerror屬性

瀏覽器腳本發(fā)生錯誤時，會觸發(fā)window對象的error事件湖员。我們可以通過window.onerror屬性對該事件指定回調(diào)函數(shù)贫悄。

window.onerror = function (message, filename, lineno, colno, error) {
  console.log("出錯了！--> %s", error.stack);
};

由于歷史原因娘摔，window的error事件的回調(diào)函數(shù)不接受錯誤對象作為參數(shù)窄坦，而是一共可以接受五個參數(shù)，它們的含義依次如下凳寺。

• 出錯信息
• 出錯腳本的網(wǎng)址
• 行號
• 列號
• 錯誤對象

老式瀏覽器只支持前三個參數(shù)鸭津。

并不是所有的錯誤，都會觸發(fā)JavaScript的error事件（即讓JavaScript報錯）肠缨，只限于以下三類事件逆趋。

• JavaScript語言錯誤
• JavaScript腳本文件不存在
• 圖像文件不存在

以下兩類事件不會觸發(fā)JavaScript的error事件。

• CSS文件不存在
• iframe文件不存在

下面是一個例子晒奕，如果整個頁面未捕獲錯誤超過3個闻书，就顯示警告。

window.onerror = function(msg, url, line) {
  if (onerror.num++ > onerror.max) {
    alert('ERROR: ' + msg + '\n' + url + ':' + line);
    return true;
  }
}
onerror.max = 3;
onerror.num = 0;

需要注意的是脑慧，如果腳本網(wǎng)址與網(wǎng)頁網(wǎng)址不在同一個域（比如使用了CDN）魄眉，瀏覽器根本不會提供詳細(xì)的出錯信息，只會提示出錯漾橙，錯誤類型是“Script error.”杆融，行號為0，其他信息都沒有霜运。這是瀏覽器防止向外部腳本泄漏信息。一個解決方法是在腳本所在的服務(wù)器蒋腮，設(shè)置Access-Control-Allow-Origin的HTTP頭信息淘捡。

Access-Control-Allow-Origin: *

然后，在網(wǎng)頁的<script>標(biāo)簽中設(shè)置crossorigin屬性池摧。

<script crossorigin="anonymous" src="http://example.com/file.js"></script>

上面代碼的crossorigin="anonymous"表示焦除，讀取文件不需要身份信息，即不需要cookie和HTTP認(rèn)證信息作彤。如果設(shè)為crossorigin="use-credentials"膘魄，就表示瀏覽器會上傳cookie和HTTP認(rèn)證信息，同時還需要服務(wù)器端打開HTTP頭信息Access-Control-Allow-Credentials竭讳。

URL的編碼/解碼方法

網(wǎng)頁URL的合法字符分成兩類创葡。

• URL元字符：分號（;），逗號（’,’）绢慢，斜杠（/）灿渴，問號（?），冒號（:），at（@）骚露，&蹬挤，等號（=），加號（+）棘幸，美元符號（$）焰扳，井號（#）
• 語義字符：a-z，A-Z误续，0-9吨悍，連詞號（-），下劃線（_）女嘲，點(diǎn)（.）畜份，感嘆號（!），波浪線（~）欣尼，星號（*）爆雹，單引號（\``），圓括號（()`）

除了以上字符愕鼓，其他字符出現(xiàn)在URL之中都必須轉(zhuǎn)義钙态，規(guī)則是根據(jù)操作系統(tǒng)的默認(rèn)編碼，將每個字節(jié)轉(zhuǎn)為百分號（%）加上兩個大寫的十六進(jìn)制字母菇晃。比如册倒，UTF-8的操作系統(tǒng)上，[http://www.example.com/q=春節(jié)](http://www.example.com/q=%E6%98%A5%E8%8A%82)這個URL之中磺送，漢字“春節(jié)”不是URL的合法字符驻子，所以被瀏覽器自動轉(zhuǎn)成[http://www.example.com/q=%E6%98%A5%E8%8A%82](http://www.example.com/q=%E6%98%A5%E8%8A%82)。其中估灿，“春”轉(zhuǎn)成了%E6%98%A5崇呵，“節(jié)”轉(zhuǎn)成了“%E8%8A%82”。這是因?yàn)椤按骸焙汀惫?jié)“的UTF-8編碼分別是E6 98 A5和E8 8A 82馅袁，將每個字節(jié)前面加上百分號域慷，就構(gòu)成了URL編碼。

JavaScript提供四個URL的編碼/解碼方法汗销。

• encodeURI()
• encodeURIComponent()
• decodeURI()
• decodeURIComponent()

encodeURI

encodeURI 方法的參數(shù)是一個字符串犹褒，代表整個URL。它會將元字符和語義字符之外的字符弛针，都進(jìn)行轉(zhuǎn)義叠骑。

encodeURI('http://www.example.com/q=春節(jié)')
// "http://www.example.com/q=%E6%98%A5%E8%8A%82"

encodeURIComponent

encodeURIComponent只轉(zhuǎn)除了語義字符之外的字符，元字符也會被轉(zhuǎn)義钦奋。因此座云，它的參數(shù)通常是URL的路徑或參數(shù)值疙赠，而不是整個URL。

encodeURIComponent('春節(jié)')
// "%E6%98%A5%E8%8A%82"
encodeURIComponent('http://www.example.com/q=春節(jié)')
// "http%3A%2F%2Fwww.example.com%2Fq%3D%E6%98%A5%E8%8A%82"

上面代碼中朦拖，encodeURIComponent會連URL元字符一起轉(zhuǎn)義圃阳，所以通常只用它轉(zhuǎn)URL的片段。

decodeURI

decodeURI用于還原轉(zhuǎn)義后的URL璧帝。它是encodeURI方法的逆運(yùn)算捍岳。

decodeURI('http://www.example.com/q=%E6%98%A5%E8%8A%82')
// "http://www.example.com/q=春節(jié)"

decodeURIComponent

decodeURIComponent用于還原轉(zhuǎn)義后的URL片段。它是encodeURIComponent方法的逆運(yùn)算睬隶。

decodeURIComponent('%E6%98%A5%E8%8A%82')
// "春節(jié)"

alert()锣夹，prompt()，confirm()

alert()苏潜、prompt()银萍、confirm()都是瀏覽器與用戶互動的全局方法。它們會彈出不同的對話框恤左，要求用戶做出回應(yīng)贴唇。

需要注意的是，alert()飞袋、prompt()戳气、confirm()這三個方法彈出的對話框，都是瀏覽器統(tǒng)一規(guī)定的式樣巧鸭，是無法定制的瓶您。

alert方法彈出的對話框，只有一個“確定”按鈕纲仍，往往用來通知用戶某些信息呀袱。

// 格式
alert(message);

// 實(shí)例
alert('Hello World');

用戶只有點(diǎn)擊“確定”按鈕，對話框才會消失郑叠。在對話框彈出期間压鉴，瀏覽器窗口處于凍結(jié)狀態(tài)，如果不點(diǎn)“確定”按鈕锻拘，用戶什么也干不了。

alert方法的參數(shù)只能是字符串击蹲，沒法使用CSS樣式署拟，但是可以用\n指定換行。

alert('本條提示\n分成兩行');

prompt方法彈出的對話框推穷，在提示文字的下方，還有一個輸入框类咧，要求用戶輸入信息馒铃，并有“確定”和“取消”兩個按鈕蟹腾。它往往用來獲取用戶輸入的數(shù)據(jù)。

// 格式
var result = prompt(text[, default]);

// 實(shí)例
var result = prompt('您的年齡区宇？', 25)

上面代碼會跳出一個對話框娃殖，文字提示為“您的年齡？”议谷，要求用戶在對話框中輸入自己的年齡（默認(rèn)顯示25）炉爆。

prompt方法的返回值是一個字符串（有可能為空）或者null，具體分成三種情況卧晓。

1. 用戶輸入信息芬首，并點(diǎn)擊“確定”，則用戶輸入的信息就是返回值逼裆。
2. 用戶沒有輸入信息郁稍，直接點(diǎn)擊“確定”，則輸入框的默認(rèn)值就是返回值胜宇。
3. 用戶點(diǎn)擊了“取消”（或者按了Esc按鈕）耀怜，則返回值是null。

prompt方法的第二個參數(shù)是可選的掸屡，但是如果不提供的話封寞，IE瀏覽器會在輸入框中顯示undefined。因此仅财，最好總是提供第二個參數(shù)狈究，作為輸入框的默認(rèn)值。

confirm方法彈出的對話框盏求，除了提示信息之外抖锥，只有“確定”和“取消”兩個按鈕，往往用來征詢用戶的意見碎罚。

// 格式
var result = confirm(message);

// 實(shí)例
var result = confirm("你最近好嗎磅废？");

上面代碼彈出一個對話框，上面只有一行文字“你最近好嗎荆烈？”拯勉，用戶選擇點(diǎn)擊“確定”或“取消”。

confirm方法返回一個布爾值憔购，如果用戶點(diǎn)擊“確定”宫峦，則返回true；如果用戶點(diǎn)擊“取消”玫鸟，則返回false导绷。

var okay = confirm('Please confirm this message.');
if (okay) {
  // 用戶按下“確定”
} else {
  // 用戶按下“取消”
}

confirm的一個用途是，當(dāng)用戶離開當(dāng)前頁面時屎飘，彈出一個對話框妥曲，問用戶是否真的要離開贾费。

window.onunload = function() {
  return confirm('你確定要離開當(dāng)面頁面嗎复颈？');
}

這三個方法都具有堵塞效應(yīng)热芹，一旦彈出對話框，整個頁面就是暫停執(zhí)行体斩，等待用戶做出反應(yīng)遵堵。

參考鏈接

• Karl Dubost, User-Agent detection, history and checklist
• Conrad Irwin, JS stacktraces. The good, the bad, and the ugly
• Daniel Lee, How to catch JavaScript Errors with window.onerror (even on Chrome and Firefox)