JS 學習筆記 4_BOM

##1.frame 相關對象##

top：指向最外層框架，使用 top 可以在一個框架中訪問另一個框架，例如 top.frames[index/name]
parent：指向當前框架的直接上層框架
window：代碼所在框架的特定實例，所以 window 對象不唯一，各個框架都有各自的 window 對象
self：指向 window，二者可以互換

##2. 窗口、頁面相關##

###1. 獲取窗口相對屏幕左邊界和上邊界的位置###

var x = (typeof window.screenLeft === 'number') ? window.screenLeft : window.screenX;//FF 只支持後者
var y = (typeof window.screenLeft === 'number') ? window.screenLeft : window.screenX;
alert(x + ', ' + y);///

瀏覽器對窗口位置的理解不同，瀏覽器窗口最大化時上面的代碼輸出結果是：

Chrome：(0, 0)
IE8：(0, 0)
FF：(-4, -4)

Safari 和 Opera 未知，瀏覽器廠商的分歧在於窗口位置是瀏覽器窗口的位置還是頁面容器（viewport）的位置

###2. 獲取頁面視口（viewport）大小###

var pageWidth = window.innerWidth;
var pageHeight = 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;
  }
}
alert(pageWidth + ', ' + pageHeight);///

視口（viewport）指的是頁面可見區域，也就是瀏覽器給頁面提供的容器，瀏覽器窗口最大化時上面的代碼輸出結果是：（分辨率 1366*768）

Chrome：(1366, 653)
IE8：(1362, 644)
FF：(1366, 667)

PC 端瀏覽器在這一點上達成了共識，但移動瀏覽器存在差異，如果需要支持移動端瀏覽器，還需要仔細研究各個瀏覽器的支持情況，這裡不再展開

###3. 打開新窗口的方式###

//window.open(url, target, strOptions, replaceOrNot);//等價於<a href="http://ayqy.net/" target="_self"></a>，target 值還可以是 frameName，表示在指定的 frame 中打開頁面
//window.open('http://ayqy.net/', '_self');//在當前頁面打開，返回按鈕失效
//var win = window.open('http://ayqy.net/', '_blank', 'width=200, height=200');//彈出 200\*200 的窗口
//setTimeout(win.close(), 3000);//3s 後自動關閉
//window.open('http://ayqy.net/', '_self', '', true);//替換掉當前歷史記錄，無痕跳轉

P.S. 用窗口方式展示內容不利於 SEO，最常見的彈出窗口除了廣告就是第三方帳號登錄，這些不需要 SEO 的地方

##3. 超時調用##

setTimeout(strCode/funcName, timeout);表示經過 timeout 毫秒後 code不一定會執行，因為該函數的確切含義是：timeout 毫秒後把指定的任務添加到任務隊列中

取消尚未執行的延時任務：

var timeoutId = setTimeout(strCode/fun, timeout);
clearTimeout(timeoutId);

P.S.setTimeout 的第一個參數雖然可以是字符串，但建議用函數名，因為字符串需要先解析成 js 代碼才能執行，存在性能損失

##4. 間歇調用##

setInterval(strCode/fun, timeout);表示按照指定時間間隔把任務插入任務隊列

注意：如果準備插入新任務時上次插入的任務還沒有執行完，會自動取消本次插入。也就是說，如果任務隊列裡沒有相同任務，則插入，否則等下一次

取消尚未執行的間歇任務：與超時調用相同，clearInterval(intervalId);

注意：不建議使用間歇調用，因為後一個間歇調用可能會在前一個結束前啟動。一般用遞歸超時調用來模擬，例如：

(function(){
  alert('x');
  setTimeout(arguments.callee, 3000);//注意不要用函數名，用 arguments.callee 更安全，因為不怕函數名被從外部更改
})();//匿名函數立即執行

##5. 對話框##

alert(msg)：警告框，用來顯示錯誤信息，只有一個確定按鈕
confirm(msg)：確認框，用於確認某些重要操作，例如刪除，有確認/取消按鈕，返回 true/false
prompt(msg, hint)：輸入框，用於獲取用戶輸入，有確認/取消按鈕，返回輸入值/null
windowprint()、window.find()：打印/查找，用處很少

##6.location 對象##

###1. 獲取 url###

location.href：獲取當前頁面的完整 url，例如"http://www.ayqy.net"
location.search：獲取查詢字符串，例如"?keyword=do"
location.hash：獲取錨（#以及後面的值，叫 hash 是因為在 UNIX 中，#就叫 hash），例如"#menu"
location.host：獲取主機名和端口號，例如"www.ayqy.net:80"
location.hostname：獲取主機名，例如"www.ayqy.net"
location.pathname：獲取 url 中的目錄或文件名，例如"/film/"
location.port：獲取端口號，例如"80"
location.protocol：返回頁面使用的協議，例如"https:"

###2. 跳轉，重定向###

location.assign(url);
location.href = url;//最常用
window.location = url;
location.replace(url);//跳轉且無法返回
location.reload(true/false);//重新載入當前頁面，若 true 則不從緩存中取

##7.navigator 對象（用來檢測瀏覽器相關參數）##

提供插件檢測和註冊處理程序等功能，註冊處理程序相當於通知瀏覽器當前頁面提供某種在線功能（例如在線電子郵件，RSS 閱讀器等等），註冊後用戶執行某些操作（例如訪問 RSS 源頁面）後會自動請求已註冊頁面，相當於桌面應用的設置默認打開方式

##8.screen 對象##

用於獲取客戶端相關信息，例如屏幕寬高、可用寬高等等，用處不多，瀏覽器支持性也不好

##9.history 對象##

history.go(delta);或者 history.go(str);向前/後跳轉，或者跳轉到最近的 url 包含 str 的頁面（可能向前也可能向後）
history.back();history.forward();模擬瀏覽器的後退/前進按鈕
history.length;獲取歷史記錄條數，為 0 則說明當前頁是用戶打開瀏覽器後訪問的第一頁

注意：可以在歷史記錄中跳轉，但無法獲得歷史 URL（安全性限制）

P.S.HTML5 提供了 hsitory.pushState/history.replaceState 函數，有人把 pushState + Ajax 合起來叫PJax技術，用來實現頁內刷新的無跳轉 web App，但 pushState 存在兼容性問題，需要引入其它支持組件

##10. 客戶端檢測技術##

功能檢測（特性檢測）：在編寫代碼之前先檢測用戶瀏覽器的能力，以便用不同的方式來實現目的，例如：
```
if(typeof String.startsWith === 'function'){...}
```
怪癖檢測：某些瀏覽器執行特定代碼時會出現不合理的結果，當某個怪癖會干擾腳本運行時才使用（此處的怪癖其實是針對瀏覽器實現的 js 的 bug 而言的，比如不該枚舉的屬性可枚舉等等，怪癖比較少見）
用戶代理檢測：通過檢測 UA 字符串來識別用戶瀏覽器的具體信息，但UA 具有欺騙性

P.S. 需要使用客戶端檢測技術時，優先選擇級別如上所述，先做功能檢測，不行就怪癖檢測，UA 檢測是下下策，因為 UA 檢測是針對特定型號的瀏覽器的，瀏覽器補丁可能會讓現有方案失效

評論

提交評論