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)

參數

描述

URL

一個可選的字符串,聲明了要在新窗口中顯示的文檔的 URL可選。如果沒有指定URL,打開一個新的空白窗口

name

可選。指定target屬性或窗口的名稱。支持以下值:

  • _blank - URL加載到一個新的窗口。這是默認
  • _parent - URL加載到父框架
  • _self - URL替換當前頁面
  • _top - URL替換任何可加載的框架集
  • name- 窗口名稱

features

可選。一個逗號分隔的項目列表。支持以下值:


replace

?

一個可選的布爾值。規定了裝載到窗口的 URL 是在窗口的瀏覽歷史中創建一個新條目,還是替換瀏覽歷史中的當前條目。支持下面的值:

  • true - URL 替換瀏覽歷史中的當前條目。
  • false - URL 在瀏覽歷史中創建新的條目。

channelmode=yes|no|1|0

是否要在影院模式顯示 window。默認是沒有的。僅限IE瀏覽器

directories=yes|no|1|0

是否添加目錄按鈕。默認是肯定的。僅限IE瀏覽器

fullscreen=yes|no|1|0

瀏覽器是否顯示全屏模式。默認是沒有的。在全屏模式下的 window,還必須在影院模式。僅限IE瀏覽器

height=pixels

窗口的高度。最小.值為100

left=pixels

該窗口的左側位置

location=yes|no|1|0

是否顯示地址字段.默認值是yes

menubar=yes|no|1|0

是否顯示菜單欄.默認值是yes

resizable=yes|no|1|0

是否可調整窗口大小.默認值是yes

scrollbars=yes|no|1|0

是否顯示滾動條.默認值是yes

status=yes|no|1|0

是否要添加一個狀態欄.默認值是yes

titlebar=yes|no|1|0

是否顯示標題欄.被忽略,除非調用HTML應用程序或一個值得信賴的對話框.默認值是yes

toolbar=yes|no|1|0

是否顯示瀏覽器工具欄.默認值是yes

top=pixels

窗口頂部的位置.僅限IE瀏覽器

width=pixels

窗口的寬度.最小.值為100

提示和注釋

特別注意一下?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)

參數

描述

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對象上使用以下方法:

方法

描述

assign()

加載新文檔

reload()

重新加載當前文檔

replace()

用新的文檔替換當前文檔

?


?

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差不都了 哎 主要還是那么幾個用的比較多??!

?

?

?

?

?


作者:??咸瑜??

本文摘自 :https://blog.51cto.com/u


更多科技新聞 ......

欧美五月丁香六月综合合_成年在线视频免费观看完整版_交换国产精品视频一区_免费一本色道久久一区