JavaScript學習日誌（四）：BOM

標籤：操作   protoc   hash   傳回值   未定義   寬度   特殊   複雜   lin   

BOM的核心對象就是window，這一章沒什麼好說的，總結一些比較常用的：

1，a未定義，
a; //報錯
window.a; //undefined

不能用delete刪除全域變數

2，html5不支援<frame>標籤，但是支援<iframe>標籤

3，js中window對象的top，opener，parent，self屬性（雖然對於window來說，它們是一種屬性，但是也可以直接用他們作為對象）的區別：

top：該變更永遠指分割視窗最高層次的瀏覽器視窗。如果計劃從分割視窗的最高層次開始執行命令，就可以用top變數。
opener：用於在window.open的頁面引用執行該window.open方法的的頁面的對象。如果a頁面使用了window.open()了b頁面，那麼我們在b頁面要引用a頁面，就可以使用opener對象，前提是必須是用window.open()方法開啟的才能用；
parent：在iframe,frame中產生的子頁面中訪問父頁面的對象。例如：A頁面中有一個iframe或frame，那麼iframe或frame中的頁面就可以通過parent對象來引用A頁面中的對象。這樣就可以擷取或傳回值到A頁面中。（不要和jquery的parent()方法混淆）
self：指當前視窗

4，視窗位置

screenLeft,screenTop :  IE, Safari, Opera, Chrome

screenX, screenY : Firefox, Safari, Chrome

跨瀏覽器擷取視窗左邊上邊位置：

var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;

var topPos =  (typeof window.screenTop == "number") ? window.screenTop : window.screenY;

window視窗位置移動（這兩個方法可能瀏覽器禁用）：

window.moveTo(200,200);  //將視窗向下移動到200像素，向右移動到200像素。（0，0）是螢幕左上方

window.moveBy(-50,100);　//將視窗向下移動100像素，向左移動50像素

網頁可見地區寬：document.body.clientWidth
網頁可見地區高：document.body.clientHeight
網頁可見地區寬：document.body.offsetWidth (包括邊線的寬)
網頁可見地區高：document.body.offsetHeight (包括邊線的寬)
網頁本文全文寬：document.body.scrollWidth
網頁本文全文高：document.body.scrollHeight
網頁被捲去的高：document.body.scrollTop
網頁被捲去的左：document.body.scrollLeft
網頁本文部分上：window.screenTop
網頁本文部分左：window.screenLeft
螢幕解析度的高：window.screen.height
螢幕解析度的寬：window.screen.width
螢幕可用工作區高度：window.screen.availHeight
螢幕可用工作區寬度：window.screen.availWidth

 

頁面視口大小（跨瀏覽器）：

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;

　　}

}

5，prompt(que,ans);
que: 對話方塊的問題
ans: 預設答案

6，location對象：
window.location === document.location; //true

location.hash; //URL中的hash
location.href; //返回的是完整的URL，如果等於一個URL，就相當於跳轉到這個URL上
location.host; //返回的是伺服器名稱和連接埠號碼(如果有)
location.hostname; //不帶連接埠號碼的伺服器名稱
location.port;//連接埠號碼
location.protocol;//頁面使用的協議，”http:”或”https:”
location.search;//URL查詢的字串，以問好開頭的，可以用location.search.substring(1)，表示問號後面的所有字串，這裡的字串是經過編碼的，要用decodeURIComponent(str)來解碼

7，URI三種解碼與編碼的對比：
decodeURI() & encodeURI()：十六進位編碼，如果url進行跳轉，可以用它來編碼，例如：Location.href=encodeURI(http://cang.baidu.com/do/s?word=百度&ct=21);

decodeURIComponent() & encodeURIComponent()：也是十六進位編碼，但是比上面的要更複雜，更細，特殊符號也會轉碼，所以適用於作為參數來使用，例如：<script language="javascript">document.write(‘<a href="http://passport.baidu.com/?logout&aid=7&u=‘+encodeURIComponent ("http://cang.baidu.com/bruce42")+‘">退出</a>‘);</script>

escape() & unescape()：不推薦使用

8，位置操作：
location.href= “url”;//推薦使用
location.assign= “url”; //等同於上面
location.replace(“url”);//跳轉後不能後退，這個有點類似與vue-router裡面，this.$router.push和this.$router.replace的區別
location.reload(); //重新載入

9，navigator對象：
主要是針對於用戶端瀏覽器的一些屬性，多的不說了，
navigator.onLine; //是否連網
navigator.appName;//瀏覽器完整名字

10，screen對象：
最常用的就是解析度了：
window.screen.width/height

11，history對象：
history.go(-1);//後退一頁
history.go(1);//前進一頁
history.back();//後退一頁
history.forward();//前進一頁

 

JavaScript學習日誌（四）：BOM