# 瀏覽器對象
JavaScript可以獲取瀏覽器提供的很多對象,并進行操作。
## window
`window`對象不但充當全局作用域,而且表示瀏覽器窗口。
`window`對象有`innerWidth`和`innerHeight`屬性,可以獲取瀏覽器窗口的內部寬度和高度。內部寬高是指除去菜單欄、工具欄、邊框等占位元素后,用于顯示網頁的凈寬高。
兼容性:IE<=8不支持。
```
'use strict';
// 可以調整瀏覽器窗口大小試試:
alert('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight);
```
對應的,還有一個`outerWidth`和`outerHeight`屬性,可以獲取瀏覽器窗口的整個寬高。
## navigator
`navigator`對象表示瀏覽器的信息,最常用的屬性包括:
* navigator.appName:瀏覽器名稱;
* navigator.appVersion:瀏覽器版本;
* navigator.language:瀏覽器設置的語言;
* navigator.platform:操作系統類型;
* navigator.userAgent:瀏覽器設定的`User-Agent`字符串。
```
'use strict';
alert('appName = ' + navigator.appName + '\n' +
'appVersion = ' + navigator.appVersion + '\n' +
'language = ' + navigator.language + '\n' +
'platform = ' + navigator.platform + '\n' +
'userAgent = ' + navigator.userAgent);
```
_請注意_,`navigator`的信息可以很容易地被用戶修改,所以JavaScript讀取的值不一定是正確的。很多初學者為了針對不同瀏覽器編寫不同的代碼,喜歡用`if`判斷瀏覽器版本,例如:
```
var width;
if (getIEVersion(navigator.userAgent) < 9) {
width = document.body.clientWidth;
} else {
width = window.innerWidth;
}
```
但這樣既可能判斷不準確,也很難維護代碼。正確的方法是充分利用JavaScript對不存在屬性返回`undefined`的特性,直接用短路運算符`||`計算:
```
var width = window.innerWidth || document.body.clientWidth;
```
## screen
`screen`對象表示屏幕的信息,常用的屬性有:
* screen.width:屏幕寬度,以像素為單位;
* screen.height:屏幕高度,以像素為單位;
* screen.colorDepth:返回顏色位數,如8、16、24。
```
'use strict';
alert('Screen size = ' + screen.width + ' x ' + screen.height);
```
## location
`location`對象表示當前頁面的URL信息。例如,一個完整的URL:
```
http://www.example.com:8080/path/index.html?a=1&b=2#TOP
```
可以用`location.href`獲取。要獲得URL各個部分的值,可以這么寫:
```
location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'
```
要加載一個新頁面,可以調用`location.assign()`。如果要重新加載當前頁面,調用`location.reload()`方法非常方便。
```
'use strict';
if (confirm('重新加載當前頁' + location.href + '?')) {
location.reload();
} else {
location.assign('/discuss'); // 設置一個新的URL地址
}
```
## document
`document`對象表示當前頁面。由于HTML在瀏覽器中以DOM形式表示為樹形結構,`document`對象就是整個DOM樹的根節點。
`document`的`title`屬性是從HTML文檔中的`<title>xxx</title>`讀取的,但是可以動態改變:
```
'use strict';
document.title = '努力學習JavaScript!';
```
請觀察瀏覽器窗口標題的變化。
要查找DOM樹的某個節點,需要從`document`對象開始查找。最常用的查找是根據ID和Tag Name。
我們先準備HTML數據:
```
<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
<dt>摩卡</dt>
<dd>熱摩卡咖啡</dd>
<dt>酸奶</dt>
<dd>北京老酸奶</dd>
<dt>果汁</dt>
<dd>鮮榨蘋果汁</dd>
</dl>
```
用`document`對象提供的`getElementById()`和`getElementsByTagName()`可以按ID獲得一個DOM節點和按Tag名稱獲得一組DOM節點:
```
'use strict';
var menu = document.getElementById('drink-menu');
var drinks = document.getElementsByTagName('dt');
var i, s, menu, drinks;
menu = document.getElementById('drink-menu');
menu.tagName; // 'DL'
drinks = document.getElementsByTagName('dt');
s = '提供的飲料有:';
for (i=0; i<drinks.length; i++) {
s = s + drinks[i].innerHTML + ',';
}
alert(s);
```
`document`對象還有一個`cookie`屬性,可以獲取當前頁面的Cookie。
Cookie是由服務器發送的key-value標示符。因為HTTP協議是無狀態的,但是服務器要區分到底是哪個用戶發過來的請求,就可以用Cookie來區分。當一個用戶成功登錄后,服務器發送一個Cookie給瀏覽器,例如`user=ABC123XYZ(加密的字符串)...`,此后,瀏覽器訪問該網站時,會在請求頭附上這個Cookie,服務器根據Cookie即可區分出用戶。
Cookie還可以存儲網站的一些設置,例如,頁面顯示的語言等等。
JavaScript可以通過`document.cookie`讀取到當前頁面的Cookie:
```
document.cookie; // 'v=123; remember=true; prefer=zh'
```
由于JavaScript能讀取到頁面的Cookie,而用戶的登錄信息通常也存在Cookie中,這就造成了巨大的安全隱患,這是因為在HTML頁面中引入第三方的JavaScript代碼是允許的:
```
<!-- 當前頁面在wwwexample.com -->
<html>
<head>
<script src="http://www.foo.com/jquery.js"></script>
</head>
...
</html>
```
如果引入的第三方的JavaScript中存在惡意代碼,則`www.foo.com`網站將直接獲取到`www.example.com`網站的用戶登錄信息。
為了解決這個問題,服務器在設置Cookie時可以使用`httpOnly`,設定了`httpOnly`的Cookie將不能被JavaScript讀取。這個行為由瀏覽器實現,主流瀏覽器均支持`httpOnly`選項,IE從IE6 SP1開始支持。
為了確保安全,服務器端在設置Cookie時,應該始終堅持使用`httpOnly`。
## history
`history`對象保存了瀏覽器的歷史記錄,JavaScript可以調用`history`對象的`back()`或`forward ()`,相當于用戶點擊了瀏覽器的“后退”或“前進”按鈕。
這個對象屬于歷史遺留對象,對于現代Web頁面來說,由于大量使用AJAX和頁面交互,簡單粗暴地調用`history.back()`可能會讓用戶感到非常憤怒。
新手開始設計Web頁面時喜歡在登錄頁登錄成功時調用`history.back()`,試圖回到登錄前的頁面。這是一種錯誤的方法。
任何情況,你都不應該使用`history`這個對象了。
- JavaScript教程
- JavaScript簡介
- 快速入門
- 基本語法
- 數據類型和變量
- 字符串
- 數組
- 對象
- 條件判斷
- 循環
- Map和Set
- iterable
- 函數
- 函數定義和調用
- 變量作用域
- 方法
- 高階函數
- map/reduce
- filter
- sort
- 閉包
- 箭頭函數
- generator
- 標準對象
- Date
- RegExp
- JSON
- 面向對象編程
- 創建對象
- 原型繼承
- 瀏覽器
- 瀏覽器對象
- 操作DOM
- 更新DOM
- 插入DOM
- 刪除DOM
- 操作表單
- 操作文件
- AJAX
- Promise
- Canvas
- jQuery
- 選擇器
- 層級選擇器
- 查找和過濾
- 操作DOM
- 修改DOM結構
- 事件
- 動畫
- 擴展
- underscore
- Collections
- Arrays
- Functions
- Objects
- Chaining
- Node.js
- 安裝Node.js和npm
- 第一個Node程序
- 模塊
- 基本模塊
- fs
- stream
- http
- buffer
- Web開發
- koa
- mysql
- swig
- 自動化工具
- 期末總結
- Python 2.7教程
- Python簡介
- 安裝Python
- Python解釋器
- 第一個Python程序
- 使用文本編輯器
- 輸入和輸出
- Python基礎
- 數據類型和變量
- 字符串和編碼
- 使用list和tuple
- 條件判斷和循環
- 使用dict和set
- 函數
- 調用函數
- 定義函數
- 函數的參數
- 遞歸函數
- 高級特性
- 切片
- 迭代
- 列表生成式
- 生成器
- 函數式編程
- 高階函數
- map/reduce
- filter
- sorted
- 返回函數
- 匿名函數
- 裝飾器
- 偏函數
- 模塊
- 使用模塊
- 安裝第三方模塊
- 使用__future__
- 面向對象編程
- 類和實例
- 訪問限制
- 繼承和多態
- 獲取對象信息
- 面向對象高級編程
- 使用__slots__
- 使用@property
- 多重繼承
- 定制類
- 使用元類
- 錯誤、調試和測試
- 錯誤處理
- 調試
- 單元測試
- 文檔測試
- IO編程
- 文件讀寫
- 操作文件和目錄
- 序列化
- 進程和線程
- 多進程
- 多線程
- ThreadLocal
- 進程 vs. 線程
- 分布式進程
- 正則表達式
- 常用內建模塊
- collections
- base64
- struct
- hashlib
- itertools
- XML
- HTMLParser
- 常用第三方模塊
- PIL
- 圖形界面
- 網絡編程
- TCP/IP簡介
- TCP編程
- UDP編程
- 電子郵件
- SMTP發送郵件
- POP3收取郵件
- 訪問數據庫
- 使用SQLite
- 使用MySQL
- 使用SQLAlchemy
- Web開發
- HTTP協議簡介
- HTML簡介
- WSGI接口
- 使用Web框架
- 使用模板
- 協程
- gevent
- 實戰
- Day 1 - 搭建開發環境
- Day 2 - 編寫數據庫模塊
- Day 3 - 編寫ORM
- Day 4 - 編寫Model
- Day 5 - 編寫Web框架
- Day 6 - 添加配置文件
- Day 7 - 編寫MVC
- Day 8 - 構建前端
- Day 9 - 編寫API
- Day 10 - 用戶注冊和登錄
- Day 11 - 編寫日志創建頁
- Day 12 - 編寫日志列表頁
- Day 13 - 提升開發效率
- Day 14 - 完成Web App
- Day 15 - 部署Web App
- Day 16 - 編寫移動App
- 期末總結
- Python3教程
- Python簡介
- 安裝Python
- Python解釋器
- 第一個Python程序
- 使用文本編輯器
- Python代碼運行助手
- 輸入和輸出
- Python基礎
- 數據類型和變量
- 字符串和編碼
- 使用list和tuple
- 條件判斷
- 循環
- 使用dict和set
- 函數
- 調用函數
- 定義函數
- 函數的參數
- 遞歸函數
- 高級特性
- 切片
- 迭代
- 列表生成式
- 生成器
- 迭代器
- 函數式編程
- 高階函數
- map/reduce
- filter
- sorted
- 返回函數
- 匿名函數
- 裝飾器
- 偏函數
- 模塊
- 使用模塊
- 安裝第三方模塊
- 面向對象編程
- 類和實例
- 訪問限制
- 繼承和多態
- 獲取對象信息
- 實例屬性和類屬性
- 面向對象高級編程
- 使用__slots__
- 使用@property
- 多重繼承
- 定制類
- 使用枚舉類
- 使用元類
- 錯誤、調試和測試
- 錯誤處理
- 調試
- 單元測試
- 文檔測試
- IO編程
- 文件讀寫
- StringIO和BytesIO
- 操作文件和目錄
- 序列化
- 進程和線程
- 多進程
- 多線程
- ThreadLocal
- 進程 vs. 線程
- 分布式進程
- 正則表達式
- 常用內建模塊
- datetime
- collections
- base64
- struct
- hashlib
- itertools
- XML
- HTMLParser
- urllib
- 常用第三方模塊
- PIL
- virtualenv
- 圖形界面
- 網絡編程
- TCP/IP簡介
- TCP編程
- UDP編程
- 電子郵件
- SMTP發送郵件
- POP3收取郵件
- 訪問數據庫
- 使用SQLite
- 使用MySQL
- 使用SQLAlchemy
- Web開發
- HTTP協議簡介
- HTML簡介
- WSGI接口
- 使用Web框架
- 使用模板
- 異步IO
- 協程
- asyncio
- async/await
- aiohttp
- 實戰
- Day 1 - 搭建開發環境
- Day 2 - 編寫Web App骨架
- Day 3 - 編寫ORM
- Day 4 - 編寫Model
- Day 5 - 編寫Web框架
- Day 6 - 編寫配置文件
- Day 7 - 編寫MVC
- Day 8 - 構建前端
- Day 9 - 編寫API
- Day 10 - 用戶注冊和登錄
- Day 11 - 編寫日志創建頁
- Day 12 - 編寫日志列表頁
- Day 13 - 提升開發效率
- Day 14 - 完成Web App
- Day 15 - 部署Web App
- Day 16 - 編寫移動App
- FAQ
- 期末總結
- Git教程
- Git簡介
- Git的誕生
- 集中式vs分布式
- 安裝Git
- 創建版本庫
- 時光機穿梭
- 版本回退
- 工作區和暫存區
- 管理修改
- 撤銷修改
- 刪除文件
- 遠程倉庫
- 添加遠程庫
- 從遠程庫克隆
- 分支管理
- 創建與合并分支
- 解決沖突
- 分支管理策略
- Bug分支
- Feature分支
- 多人協作
- 標簽管理
- 創建標簽
- 操作標簽
- 使用GitHub
- 自定義Git
- 忽略特殊文件
- 配置別名
- 搭建Git服務器
- 期末總結