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_浏览器对象模型的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 056_Object对象方法
- 下一篇： 081_浏览器历史