菜鳥筆記--window對象

全部瀏覽器都支持 window 對象。它表示瀏覽器窗口。

全部 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。

全局變量是 window 對象的屬性。

全局函數是 window 對象的方法。

Browser 對象------------------------------------------------

一 navigator對象

window.navigator 對象包含有關訪問者瀏覽器的信息
window.navigator 對象在編寫時可不使用 window 這個前綴。

1. appCodeName 返回瀏覽器的代碼名

navigator.appCodeName
"Mozilla"

2. appName 返回瀏覽器的名稱

navigator.appName
"Netscape"

3. appVersion 返回瀏覽器的平臺和版本名稱

navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.62 Safari/537.36"

4. cookieEnabled 返回運行瀏覽器的操做系統平臺
navigator.cookieEnabled
true

5. platform 返回瀏覽器的操做系統平臺

navigator.platform
"Win32"

6. userAgent 返回由客戶機發送服務器的user-agent頭部的值

navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.62 Safari/537.36"

二 screen 顯示器對象

1. availHeight 返回顯示屏幕的可用高度

availHeight 屬性聲明瞭顯示瀏覽器的屏幕的可用高度，以像素計。在 Windows 這樣的操做系統中，這個可用高度不包括分配給半永久特性（如屏幕底部的任務欄）的垂直空間。
document.write('可用的屏幕高度'+ screen.availHeight);

2. availWihth 返回顯示屏幕的可用寬度

document.write('可用的屏幕寬度'+ screen.availWidth);

3. height 屬性聲明瞭顯示瀏覽器的屏幕的高度，以像素計。

4. width 屬性聲明瞭顯示瀏覽器的屏幕的寬度，以像素計。

5. colorDepth 返回目標設備或緩衝器上的調色板的比特深度。

三 history 歷史對象

window.history 對象在編寫時可不使用 window 這個前綴。

1. back() 返回前一個URL

history.back() - 與在瀏覽器點擊後退按鈕相同

2. forword() 返回下一個URL

history.forward() - 與在瀏覽器中點擊按鈕向前相同

3. go() 返回某個具體頁面

go()方法只有一個參數，能夠是整數、負數。若是是正數，就前進。負數就是後退。（至關於Forward和Back的區別）

後退一頁 history.go(-1)

前進一頁 history.go(1)

四 location 位置方法

window.location 對象在編寫時可不使用 window 這個前綴。

1. 屬性

(1) hash 設置或返回從井號(#) 開始的URL

(2) host 設置或返回主機名和當前URL的端口號

location.host
"www.w3school.com.cn"

(3) hostname 設置返回當前URL的主機名

(4) href 設置或返回完整帶的URL

location.href
"http://www.w3school.com.cn/js/js_window_location.asp"

(5) pathname 設置或返回當前URL的路徑部分

location.pathname
"/js/js_window_location.asp"

(6) port 設置或返回主機名和當前URL的端口號

(7) protocol 設置或返回當前URL的協議

location.protocol
"http:"

(8) search 設置或返回從問號(?)開始的URL

2. 方法

1. assign(URL) 加載新的文檔

function newDoc(){
window.location.assign("http://www.baidu.com")
}

2. reload() 從新加載當前頁面

3. replace(newURL) 用新的文檔替代當前文檔

 

window 對象-----------------------------------------------------------------------

一 window對象屬性

1. 狀態欄

(1) defaultStatus 改變瀏覽器狀態欄的默認提示

window.defaultStatus = "This is the default text in the status bar!"

(2) status 臨時改變瀏覽器狀態欄的顯示

window.status = "Some text in the status bar!"

2. 窗口位置（重點）

(1) IE 瀏覽器

(1.1) IE、Safari 和 Opera
screenLeft 聲明窗口的左上角的X光標

screenTop 聲明窗口的左上角的Y光標

(1.2) 聲明當前文檔向右滾動過的像素數
document.body.scrollLeft
document.documentElement.scrollLeft

聲明當前文檔向下滾動過的像素數
document.body.scrollTop
document.documentElement.scrollTop

(1.3) 瀏覽器窗口的內部高度(只針對 8，7，6，5)
document.body.clientHeight
document.documentElement.clientHeight

(1.4) 瀏覽器窗口的內部寬度(只針對 8，7，6，5)
document.body.clientWidth
document.documentElement.clientWidth

(2) 非IE 瀏覽器

(2.1) (Safari Firefox)
screenX 聲明窗口的左上角的X光標

screenY 聲明窗口的左上角的Y光標

(2.2) pageXOffset 聲明當前文檔向右滾動過的像素數

pageYOffset 聲明當前文檔向下滾動過的像素數

(2.3) 瀏覽器窗口的內部高度
window.innerHeight

瀏覽器窗口的內部寬度
window.innerWidth

//瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）。
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

var x = document.getElementById('demo');
x.innerHTML = '寬度是' + w + '高度是' + h

3. 其餘屬性

(3.1) opener 能夠實現同域名下跨窗體之間的通信
一個窗體要包含另外一個窗體的opener

opener 屬性是一個可讀可寫的屬性，可返回對建立該窗口的 Window 對象的引用。

opener 屬性很是有用，建立的窗口能夠引用建立它的窗口所定義的屬性和函數。

window.opener

註釋：只有表示頂層窗口的 Window 對象的 operner 屬性纔有效，表示框架的 Window 對象的 operner 屬性無效。

myWindow=window.open('','MyName','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.focus()
myWindow.opener.document.write("This is the parent window")

詳情看 https://blog.csdn.net/u012102536/article/details/53424165

(3.2) closed 當前窗口關閉時返回true

(3.3) name 設置或返回窗口前名稱

(3.4) self 返回對當前窗口的引用

二 window對象方法

A.定時器

1. setTimeout

語法 setTime(執行代碼，毫秒數)
功能 當到了指定的毫秒數後，自動執行功能代碼

2. clearTimeout

語法 clearTimeout(定時器)
功能 取消由setTimeout()設置的定時器

3. setInterval

語法 setInterval(重複執行的代碼，毫秒數)
功能 按指定週期重複執行功能代碼

4. clearInterval

語法 clearInterval(時間間隔器)
功能 取消由setInterval()設置的時間間隔器

B. 對話框

1. alert

語法 alert("提示字符串")
功能 彈出一個警告框，在警告框內顯示提示字符串

2. confirm

語法 confirm("提示字符串")
功能 顯示一個確認框，在確認框能顯示提示字符串
當用戶但其「肯定」按鈕時該方法返回true
當單擊「取消」按鈕時，但會null值

3. prompt

語法 prompt("提示字符串"，「缺乏文本」)
功能 顯示一個輸入框，在輸入框顯示字符串
在輸入文本框顯示缺乏文本，並等待用戶輸入
當用戶單擊「肯定」按鈕時，返回用戶輸入的字符串
當單擊「取消」按鈕時，但會null值

D. open and close

open() 方法用於打開一個新的瀏覽器窗口或查找一個已命名的窗口。
window.open(URL,name,features,replace)

新瀏覽器窗口中打開 www.w3school.com.cn ：
window.open("http://www.w3school.com.cn")

在新瀏覽器窗口中打開 about:blank 頁：
myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.focus()

E. scollBy and scrollTo

scrollBy(xnum,ynum)按照指定的像素值來滾動內容。
window.scrollBy(100,100)

scrollTo()把內容滾動到指定的座標。
scrollTo(xpos,ypos)
window.scrollTo(100,500)

F. resizeBy and resizeTo

resizeBy(width,height)方法用於根據指定的像素來調整窗口的大小。
window.resizeBy(-100,-100)

resizeTo(width,height) 方法用於把窗口大小調整爲指定的寬度和高度。
window.resizeTo(500,300)

G. moveBy and moveTo

moveBy() 方法可相對窗口的當前座標把它移動指定的像素。
window.moveBy(x,y) x要把窗口右移的像素數 y要把窗口下移的像素數

moveTo() 方法可把窗口的左上角移動到一個指定的座標。
window.moveTo(x,y)

H. focus() 方法可把鍵盤焦點給予一個窗口。
window.focus()

下面的例子可確保新的窗口獲得焦點：
myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.focus()

blur() 方法可把鍵盤焦點從頂層窗口移開。
window.blur()

 

HTML DOM 對象----------------------------------------------------------------------------------

一 document 文檔對象

每一個載入瀏覽器的 HTML 文檔都會成爲 Document 對象。

Document 對象使咱們能夠從腳本中對 HTML 頁面中的全部元素進行訪問。

提示：Document 對象是 Window 對象的一部分，可經過 window.document 屬性對其進行訪問。

1. 集合

(1) anchors[] 描點對象數組

document.anchors.length

(2) images[] 圖片對象數組

document.images.length

(3) links[] 鏈接對象數組

document.links.length

(4) forms[] 表單對象數組

document.forms.length

(5) all[] 返回對文檔中全部 HTML 元素的引用

document.all是頁面內全部元素的一個集合
document.all(0)表示頁面內第一個元素

document.all[i]
document.all[name]
document.all.tags[tagname]

2. 屬性

(1) cookie 設置或返回與當前文檔有關的全部cookie

該屬性是一個可讀可寫的字符串，可以使用該屬性對當前文檔的 cookie 進行讀取、建立、修改和刪除操做。
document.cookie

(2) domain 返回當前文檔的域名
document.domain //www.w3school.com.cn

(3) referrer 返回當前文檔的文檔的URL
document.referrer
"http://www.w3school.com.cn/jsref/dom_obj_document.asp"

(4) title 返回當前文檔的標題
document.title
"HTML DOM title 屬性"

(5) URL 返回當前文檔的文檔的URL
document.URL
"http://www.w3school.com.cn/jsref/prop_doc_title.asp"

(6) lastModified 返回文檔最近被修改的日期和時間
document.lastModified
"08/06/2018 21:21:34"

3. 方法

(1) open() 打開一個新的文檔，並擦除舊文檔的內容
document.open(minetype,replce)

重要事項：調用 open() 方法打開一個新文檔而且用 write() 方法設置文檔內容後，必須記住用 close 方法關閉文檔，並迫使其內容顯示出來。

註釋：屬於被覆蓋的文檔的一部分的腳本或事件句柄不能調用該方法，由於腳本或事件句柄自身也會被覆蓋。

(2) close() 關閉文檔輸出流

(3) write() 想當前文檔追加寫入文本

write() 方法值得注意，在文檔載入和解析的時候，它容許一個腳本向文檔中插入動態生成的內容。

function myFunc(){
var newDoc = document.open("text/html", "replace");
var txt = "<html><body>鈴兒響叮噹</body></html>"
newDoc.write(txt);
newDoc.close()
}

(4) written() 與write相同，在<pre>中追加換行等同於 write() 方法，不一樣的是在每一個表達式以後寫一個換行符。