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

JS Browser BOM　　來之 3WSCHOOL

?-- (自定義學習版)　　

這里講解 JavaScript BOM 對象?。?/p>

Window - 瀏覽器對象模型（窗口對象模型）

Window 對象

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

所有全局 JavaScript 對象，函數和變量自動成為 window 對象的成員。

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

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

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

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

?

window.document.getElementById("header");

等同于：

document.getElementById("header");

?

?

?

窗口尺寸

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

這兩個屬性都以像素返回尺寸：

• window.innerHeight - 瀏覽器窗口的內高度（以像素計）
• window.innerWidth - 瀏覽器窗口的內寬度（以像素計）

　　　但不包括工具欄和滾動條。

　　例：

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

或

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

例：(自己復制在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);

反正我覺得不多準啊 自己去測試啊? 前端煩死了....搞這搞那的...

?

?

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

其他窗口方法

一些其他方法：

• window.open() - 打開新窗口
• window.close() - 關閉當前窗口
• window.moveTo() -移動當前窗口
• window.resizeTo() -重新調整當前窗口

?

接下來一一介紹：

?

• window.open()

定義和用法

?

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

?

語法

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

提示和注釋

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

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

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

犯法返回一個窗口對象 可以用此對象操作新建的窗口 例：

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

?

?

?

Window?close()?方法

定義和用法

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

直接關閉 沒什么其他的..

?

?

• window.moveTo() -移動當前窗口

定義和用法

moveTo() 方法可把窗口的左上角移動到一個指定的坐標。

語法

• window.moveTo(x,y)

　　例： 將新窗口移動到x為0y為0 即：左上角~

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

?

?

?

?window.resizeTo() -重新調整當前窗口

?

定義和用法

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

語法

resizeTo(width,height)

這個也沒什么好說 自己寫啊?

?

?

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

?

?

Window Screen? 窗口屏幕對象

?

window.screen?對象不帶 window 前綴也可以寫：

屬性：

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

? 1.screen.width?屬性返回以像素計的訪問者屏幕寬度。

例:document.writeln(screen.width);

2.screen.height?屬性返回以像素計的訪問者屏幕的高度。

例:document.writeln(screen.height);

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

例:document.writeln(screen.availWidth);

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

例:document.writeln(screen.availHeight);

5.screen.colorDepth?屬性返回用于顯示一種顏色的比特數。

所有現代計算機都使用 24 位或 32 位硬件的色彩分辨率：

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

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

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

例：document.writeln(screen.colorDepth);

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

例：document.writeln(screen.pixelDepth);

對于現代計算機，顏色深度和像素深度是相等的。

貌似這幾個函數除了1和2? 其他沒什么軟用..

?

Location對象這里不說啊 具體在JavaScript分區的location三個犯法會用即可：屬性哪里也有?。?/h2>

Location 對象方法

可以在Location對象上使用以下方法：

?

?

History：歷史window.history 對象包含瀏覽器歷史。

window.history?對象可不帶 window 書寫。

為了保護用戶的隱私，JavaScript 訪問此對象存在限制。

對象方法：

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

?

1.history.back()?

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

這等同于在瀏覽器中點擊后退按鈕。

?

2.

?

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

?

這等同于在瀏覽器中點擊前進按鈕。

?

?

?window.navigator 對象包含有關訪問者的信息。

?

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

?這也不說啊 自己看

?

?

?

Timing 事件 計時器啊? 就是 那個....也學過的啦 就是 那玩意?setTimeout(function,?milliseconds) 和?setInterval(function,?milliseconds) 這玩意??！

?

Cookies? 對象

什么是 cookie？

Cookie 是在您的計算機上存儲在小的文本文件中的數據。

當 web 服務器向瀏覽器發送網頁后，連接被關閉，服務器會忘記用戶的一切。

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

• 當用戶訪問網頁時，他的名字可以存儲在 cookie 中。
• 下次用戶訪問該頁面時，cookie 會“記住”他的名字。

Cookie 保存在名稱值對中，如：

username?=?Bill?Gates

當瀏覽器從服務器請求一個網頁時，將屬于該頁的 cookie 添加到該請求中。這樣服務器就獲得了必要的數據來“記住”用戶的信息。

如果瀏覽器已關閉本地 cookie 支持，則以下實例均無法工作。

?

通過 JavaScript 創建 cookie

JavaScript 可以用?document.cookie?屬性創建、讀取、刪除 cookie。

通過 JavaScript，可以這樣創建 cookie：

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

您還可以添加有效日期（UTC 時間）。默認情況下，在瀏覽器關閉時會刪除 cookie：

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

通過?path?參數，您可以告訴瀏覽器 cookie 屬于什么路徑。默認情況下，cookie 屬于當前頁。

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

　　//不知道你看懂沒 反正我是沒看懂啊..其實你cookie要有東西復制給他就行了..

?

?

?

通過 JavaScript 讀取 cookie

通過 JavaScript，可以這樣讀取 cookie：

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

?

google 不行啊 讀取不出來??！火狐就可以??！

可以自己試試啊

?

?

通過 JavaScript 改變 cookie

通過使用 JavaScript，你可以像你創建 cookie 一樣改變它：

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

舊 cookie 被覆蓋。

?

通過 JavaScript 刪除 cookie

刪除 cookie 非常簡單。

刪除 cookie 時不必指定 cookie 值：

直接把?expires?參數設置為過去的日期即可：

document.cookie?=?"username=;?expires=Thu,?01?Jan?1970?00:00:00?UTC;?path=/;";
其實吧！你也可以直接暴力點?管他干?。?br/>document.cookie?=?'';

您應該定義 cookie 路徑以確保刪除正確的 cookie。

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

?

cookie 字符串

document.cookie?屬性看起來像一個正常的文本字符串。什么（什么看起來像啊? 簡直就是原模原樣！媽耶）但它不是。

即使你向?document.cookie?寫一份完整的 cookie 字符串，當再次讀取時，你只能看到它的名稱-值對。

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

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

顯示所有 cookie 創建 cookie 1 創建 cookie 2 刪除 cookie 1 刪除 cookie 2

如果你想找到一個指定 cookie 的值，你必須編寫 JavaScript 函數來搜索 cookie 字符串中的 cookie 值

?

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

具體創建 查詢 什么什么的方法 自己寫??！

好了??！? BOM差不都了 哎 主要還是那么幾個用的比較多??！

?

?

?

?

?

作者：??咸瑜??