當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

076_浏览器对象模型

發布時間：2025/4/17 HTML 157 豆豆

生活随笔收集整理的這篇文章主要介紹了 076_浏览器对象模型小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 瀏覽器對象模型(Browser Object Model(BOM))允許JavaScript與瀏覽器對話。

2. 瀏覽器對象模型(Browser Object Model(BOM))

2.1. 不存在瀏覽器對象模型(BOM)的官方標準。

2.2. 現代的瀏覽器已經(幾乎)實現了JavaScript交互相同的方法和屬性, 因此它經常作為BOM的方法和屬性被提到。

3. Window對象

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

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

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

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

3.5. 甚至(html DOM的)document對象也是window對象屬性:

window.document.getElementById("header"); // 等同于: document.getElementById("header");

4. 窗口尺寸

4.1. window.innerWidth, 瀏覽器窗口(瀏覽器視口)的內寬度(以像素計), 不包括工具欄, 如果有水平滾動條, 也包括滾動條高度。

4.2. window.innerHeight, 瀏覽器窗口(瀏覽器視口)的內高度(以像素計), 不包括工具欄, 如果有垂直滾動條, 也包括滾動條高度。

4.3. window.innerWidth和window.innerHeight是只讀屬性。

4.4. window.outerWidth返回窗口的外部寬度, 包括所有的界面元素(如工具欄/滾動)。

4.5. window.outerHeight返回一個窗口的外部高度, 包括所有界面元素(如工具欄/滾動條)。

4.6. window.outerWidth和window.outerHeight是只讀屬性。

4.7. 在非全屏模式下外部寬度和高度比內部寬度和高度還會額外多出16px(Chrome, 不同瀏覽器不相同)。

4.8. 例子

4.8.1. 代碼

<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8" /><title>瀏覽器窗口的尺寸</title></head><body><script type="text/javascript">// 改變瀏覽器窗口大小會輸出不一樣的值document.write('瀏覽器窗口的內寬度: ' + window.innerWidth + ', 瀏覽器窗口的內高度: ' + window.innerHeight + '<br />');document.write('瀏覽器窗口的外部寬度: ' + window.outerWidth + ', 瀏覽器窗口的外部高度: ' + window.outerHeight + '<br />');</script></body> </html>

4.8.2. 效果圖

5. Window open()方法

5.1. open()方法用于打開一個新的瀏覽器窗口。

5.2. 語法

window.open(URL,name,specs)

5.3. 參數

6. Window close()方法

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

6.2. 只有通過JavaScript代碼打開的窗口才能夠由JavaScript代碼關閉。這阻止了惡意的腳本終止用戶的瀏覽器。

6.3. 語法

window.close()

6.4. 例子

6.4.1. 代碼

<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8" /><title>Window open()和close()方法</title></head><body><iframe name="iframe_a" frameborder="0" style="width: 400px;height: 250px;border: solid 1px;">瀏覽器不支持iframe</iframe><br /><br /><button onclick="openNewBlank()">打開一個新的空白窗口</button><button onclick="openNameBlank()">窗口名稱為_blank</button><button onclick="openNameBlankFull()">窗口名稱為_blankFull</button><button onclick="openNameSelf()">窗口名稱為_self</button><button onclick="openName()">窗口名稱為iframe_a</button><button onclick="closeMyWin()">關閉我的窗口</button><script type="text/javascript">function openNewBlank() {window.open();}var myWindow;function openNameBlank() {myWindow = window.open('', '_blank', 'width=800,height=500,left=200,top=100');myWindow.document.write("<p>這是'我的窗口'</p>");myWindow.focus();}function openNameBlankFull() {var closeWindow = window.open('', '_blank');closeWindow.document.write("<button onclick='closeWin()'>關閉窗口</button>");closeWindow.document.write("<script type='text\/javascript'>");closeWindow.document.write("function closeWin() {");closeWindow.document.write("window.close();");closeWindow.document.write("}");closeWindow.document.write("<\/script>");}function openNameSelf() {window.open('https://www.baidu.com/', '_self');}function openName() {window.open('https://v.qq.com/', 'iframe_a');}function closeMyWin() {if(myWindow != undefined) myWindow.close();} </script></body> </html>

6.4.2. 效果圖

總結

以上是生活随笔為你收集整理的076_浏览器对象模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。