JS Browser BOM
2022-05-31 17:14:04

JS Browser BOM　　來(lái)之 3WSCHOOL

?-- (自定義學(xué)習(xí)版)　　

這里講解 JavaScript BOM 對(duì)象啊：

Window - 瀏覽器對(duì)象模型（窗口對(duì)象模型）

Window 對(duì)象

所有瀏覽器都支持?window?對(duì)象。它代表瀏覽器的窗口。

所有全局 JavaScript 對(duì)象，函數(shù)和變量自動(dòng)成為 window 對(duì)象的成員。

全局變量是 window 對(duì)象的屬性。

全局函數(shù)是 window 對(duì)象的方法。

甚至（HTML DOM 的）document 對(duì)象也是 window 對(duì)象屬性：

蠻重要的啊? 所以啊 可以不用寫 直接用.

?

window.document.getElementById("header");

等同于：

document.getElementById("header");

?

?

?

窗口尺寸

兩個(gè)屬性可用用于確定瀏覽器窗口的尺寸。

這兩個(gè)屬性都以像素返回尺寸：

• window.innerHeight - 瀏覽器窗口的內(nèi)高度（以像素計(jì)）
• window.innerWidth - 瀏覽器窗口的內(nèi)寬度（以像素計(jì)）

　　　但不包括工具欄和滾動(dòng)條。

　　例：

• document.documentElement.clientHeight
• document.documentElement.clientWidth

或

• document.body.clientHeight
• document.body.clientWidth

例：(自己復(fù)制在script中試試！)

var?h?=?window.innerHeight;
var?w?=?window.innerWidth;
document.write("高："?+?h?+?"<pre>
</pre>"?+?"寬"?+?w);

????document.writeln("<pre>
</pre>?----------?<pre>
</pre>");

????/*第二種：*/
var?h?=?document.body.clientWidth;
var?w?=?document.body.clientHeight;
document.write("高："?+?h?+?"<pre>
</pre>"?+?"寬"?+?w);

反正我覺(jué)得不多準(zhǔn)啊 自己去測(cè)試啊? 前端煩死了....搞這搞那的...

?

?

-------------------------------------------------------------------------------------------

其他窗口方法

一些其他方法：

• window.open() - 打開新窗口
• window.close() - 關(guān)閉當(dāng)前窗口
• window.moveTo() -移動(dòng)當(dāng)前窗口
• window.resizeTo() -重新調(diào)整當(dāng)前窗口

?

接下來(lái)一一介紹：

?

• window.open()

定義和用法

?

open() 方法用于打開一個(gè)新的瀏覽器窗口或查找一個(gè)已命名的窗口。

?

語(yǔ)法

window.open(URL,name,features,replace)

提示和注釋

特別注意一下?name 這個(gè)參數(shù)啊 如果打開的窗口中存在這個(gè)name 那么就不會(huì)打開了啊? 即：不存在name的窗口我才新建一個(gè)窗口給你的啊.

還有就是?。喝绻麨g覽器阻止彈出窗口 那么會(huì)返回null啊? 因此可以將這個(gè)語(yǔ)句放入到try - cathch中?。??

重要事項(xiàng)：請(qǐng)不要混淆方法 Window.open() 與方法 Document.open()，這兩者的功能完全不同。為了使您的代碼清楚明白，請(qǐng)使用 Window.open()，而不要使用 open()。

犯法返回一個(gè)窗口對(duì)象 可以用此對(duì)象操作新建的窗口 例：

function?openWin(){
????myWindow=window.open('','','width=200,height=100');
????myWindow.document.write("<p>這是'我的窗口'</p>");
????myWindow.focus();
}

?

?

?

Window?close()?方法

定義和用法

close() 方法用于關(guān)閉瀏覽器窗口。

直接關(guān)閉 沒(méi)什么其他的..

?

?

• window.moveTo() -移動(dòng)當(dāng)前窗口

定義和用法

moveTo() 方法可把窗口的左上角移動(dòng)到一個(gè)指定的坐標(biāo)。

語(yǔ)法

• window.moveTo(x,y)

　　例： 將新窗口移動(dòng)到x為0y為0 即：左上角~

function?moveWin(){
????myWindow.moveTo(0,0);
????myWindow.focus();
}

?

?

?

?window.resizeTo() -重新調(diào)整當(dāng)前窗口

?

定義和用法

resizeTo() 方法用于把窗口大小調(diào)整為指定的寬度和高度。

語(yǔ)法

resizeTo(width,height)

這個(gè)也沒(méi)什么好說(shuō) 自己寫啊?

?

?

?以上幾個(gè)窗口的4個(gè)方法 主要還是先要獲取到window對(duì)象啊.

?

?

Window Screen? 窗口屏幕對(duì)象

?

window.screen?對(duì)象不帶 window 前綴也可以寫：

屬性：

• screen.width
• screen.height
• screen.availWidth
• screen.availHeight
• screen.colorDepth
• screen.pixelDepth

? 1.screen.width?屬性返回以像素計(jì)的訪問(wèn)者屏幕寬度。

例:document.writeln(screen.width);

2.screen.height?屬性返回以像素計(jì)的訪問(wèn)者屏幕的高度。

例:document.writeln(screen.height);

3.screen.availWidth?屬性返回訪問(wèn)者屏幕的寬度，以像素計(jì)，減去諸如窗口工具條之類的界面特征。

例:document.writeln(screen.availWidth);

4.screen.availHeight?屬性返回訪問(wèn)者屏幕的高度，以像素計(jì)，減去諸如窗口工具條之類的界面特征。

例:document.writeln(screen.availHeight);

5.screen.colorDepth?屬性返回用于顯示一種顏色的比特?cái)?shù)。

所有現(xiàn)代計(jì)算機(jī)都使用 24 位或 32 位硬件的色彩分辨率：

• 24 bits =16,777,216 種不同的 "True Colors"
• 32 bits = 4,294,967,296 中不同的 "Deep Colors"

更老的計(jì)算機(jī)使用 14 位：65,536 種不同的 "High Colors" 分辨率。

異常古老的計(jì)算機(jī)，以及老式的手機(jī)使用 8 位：256 中不同的 "VGA colors"。

例：document.writeln(screen.colorDepth);

6.screen.pixelDepth?屬性返回屏幕的像素深度。

例：document.writeln(screen.pixelDepth);

對(duì)于現(xiàn)代計(jì)算機(jī)，顏色深度和像素深度是相等的。

貌似這幾個(gè)函數(shù)除了1和2? 其他沒(méi)什么軟用..

?

Location對(duì)象這里不說(shuō)啊 具體在JavaScript分區(qū)的location三個(gè)犯法會(huì)用即可：屬性哪里也有?。?/h2>

Location 對(duì)象方法

可以在Location對(duì)象上使用以下方法：

?

?

History：歷史window.history 對(duì)象包含瀏覽器歷史。

window.history?對(duì)象可不帶 window 書寫。

為了保護(hù)用戶的隱私，JavaScript 訪問(wèn)此對(duì)象存在限制。

對(duì)象方法：

• history.back() - 等同于在瀏覽器點(diǎn)擊后退按鈕
• history.forward() - 等同于在瀏覽器中點(diǎn)擊前進(jìn)按鈕

?

1.history.back()?

history.back()?方法加載歷史列表中前一個(gè) URL。

這等同于在瀏覽器中點(diǎn)擊后退按鈕。

?

2.

?

history forward()?方法加載歷史列表中下一個(gè) URL。

?

這等同于在瀏覽器中點(diǎn)擊前進(jìn)按鈕。

?

?

?window.navigator 對(duì)象包含有關(guān)訪問(wèn)者的信息。

?

JavaScript 有三種類型的彈出框：警告框、確認(rèn)框和提示框。

?這也不說(shuō)啊 自己看

?

?

?

Timing 事件 計(jì)時(shí)器啊? 就是 那個(gè)....也學(xué)過(guò)的啦 就是 那玩意?setTimeout(function,?milliseconds) 和?setInterval(function,?milliseconds) 這玩意?。?/h2>

---

?

Cookies? 對(duì)象

什么是 cookie？

Cookie 是在您的計(jì)算機(jī)上存儲(chǔ)在小的文本文件中的數(shù)據(jù)。

當(dāng) web 服務(wù)器向?yàn)g覽器發(fā)送網(wǎng)頁(yè)后，連接被關(guān)閉，服務(wù)器會(huì)忘記用戶的一切。

Cookie 是為了解決“如何記住用戶信息”而發(fā)明的：

• 當(dāng)用戶訪問(wèn)網(wǎng)頁(yè)時(shí)，他的名字可以存儲(chǔ)在 cookie 中。
• 下次用戶訪問(wèn)該頁(yè)面時(shí)，cookie 會(huì)“記住”他的名字。

Cookie 保存在名稱值對(duì)中，如：

username?=?Bill?Gates

當(dāng)瀏覽器從服務(wù)器請(qǐng)求一個(gè)網(wǎng)頁(yè)時(shí)，將屬于該頁(yè)的 cookie 添加到該請(qǐng)求中。這樣服務(wù)器就獲得了必要的數(shù)據(jù)來(lái)“記住”用戶的信息。

如果瀏覽器已關(guān)閉本地 cookie 支持，則以下實(shí)例均無(wú)法工作。

?

通過(guò) JavaScript 創(chuàng)建 cookie

JavaScript 可以用?document.cookie?屬性創(chuàng)建、讀取、刪除 cookie。

通過(guò) JavaScript，可以這樣創(chuàng)建 cookie：

document.cookie?=?"username=Bill?Gates";

您還可以添加有效日期（UTC 時(shí)間）。默認(rèn)情況下，在瀏覽器關(guān)閉時(shí)會(huì)刪除 cookie：

document.cookie?=?"username=John?Doe;?expires=Sun,?31?Dec?2017?12:00:00?UTC";

通過(guò)?path?參數(shù)，您可以告訴瀏覽器 cookie 屬于什么路徑。默認(rèn)情況下，cookie 屬于當(dāng)前頁(yè)。

document.cookie?=?"username=Bill?Gates;?expires=Sun,?31?Dec?2017?12:00:00?UTC;?path=/";

　　//不知道你看懂沒(méi) 反正我是沒(méi)看懂啊..其實(shí)你cookie要有東西復(fù)制給他就行了..

?

?

?

通過(guò) JavaScript 讀取 cookie

通過(guò) JavaScript，可以這樣讀取 cookie：

document.cookie = "name = hgy";
var xx = document.cookie;
document.writeln(xx);

?

google 不行啊 讀取不出來(lái)啊！火狐就可以啊！

可以自己試試啊

?

?

通過(guò) JavaScript 改變 cookie

通過(guò)使用 JavaScript，你可以像你創(chuàng)建 cookie 一樣改變它：

document.cookie?=?"username=Steve?Jobs;?expires=Sun,?31?Dec?2017?12:00:00?UTC;?path=/";
直接改啊

舊 cookie 被覆蓋。

?

通過(guò) JavaScript 刪除 cookie

刪除 cookie 非常簡(jiǎn)單。

刪除 cookie 時(shí)不必指定 cookie 值：

直接把?expires?參數(shù)設(shè)置為過(guò)去的日期即可：

document.cookie?=?"username=;?expires=Thu,?01?Jan?1970?00:00:00?UTC;?path=/;";
其實(shí)吧！你也可以直接暴力點(diǎn)?管他干啊：
document.cookie?=?'';

您應(yīng)該定義 cookie 路徑以確保刪除正確的 cookie。

如果你不指定路徑，一些瀏覽器不會(huì)讓你刪除 cookie。

?

cookie 字符串

document.cookie?屬性看起來(lái)像一個(gè)正常的文本字符串。什么（什么看起來(lái)像啊? 簡(jiǎn)直就是原模原樣！媽耶）但它不是。

即使你向?document.cookie?寫一份完整的 cookie 字符串，當(dāng)再次讀取時(shí)，你只能看到它的名稱-值對(duì)。

如果設(shè)置了新 cookie，則舊的 cookie 不會(huì)被覆蓋。新的 Cookie 會(huì)被添加到 document.cookie，所以如果你讀取 document.cookie，你得到的東西會(huì)像這樣：

cookie1?=?value;?cookie2?=?value;

顯示所有 cookie 創(chuàng)建 cookie 1 創(chuàng)建 cookie 2 刪除 cookie 1 刪除 cookie 2

如果你想找到一個(gè)指定 cookie 的值，你必須編寫 JavaScript 函數(shù)來(lái)搜索 cookie 字符串中的 cookie 值

?

別管那么多 知道怎么創(chuàng)建刪除差不都了 前段煩死了 媽耶！??！

具體創(chuàng)建 查詢 什么什么的方法 自己寫??！

好了啊！? BOM差不都了 哎 主要還是那么幾個(gè)用的比較多?。?/h2>

?

?

?

?

?

作者：??咸瑜??