溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“JavaScript BOM知識點有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JavaScript BOM知識點有哪些”吧!
1、BOM 簡介
所謂的 BOM 即瀏覽器對象模型（Browser Object Model）。BOM 賦予了 JS 操作瀏覽器的能力，即 window 操作。DOM 則用于創建刪除節點，操作 HTML 文檔。BOM 尚無正式的標準，導致各瀏覽器對于 BOM 方法的支持各有不同，因此需要具體問題具體對待。
2、window 對象
window 對象是 BOM 的核心，window 對象指當前的瀏覽器窗口。所有 JS 全局對象、函數以及變量都屬于 window 對象。全局變量是 window 對象的屬性。全局函數是 window 對象的方法。甚至 DOM 的 document 也屬于 window 對象的屬性之一，只是大多數情況下可以忽略不寫。
window 對象方法：
| 方法 | 描述 |
| alert() | 彈出帶有文本消息和一個確認按鈕的警告框 |
| prompt() | 彈出可提示用戶輸入的對話框 |
| confirm() | 彈出帶有文本消息及確認按鈕和取消按鈕的對話框 |
| open() | 打開一個新的瀏覽器窗口 |
| close() | 關閉瀏覽器窗口 |
| print() | 打印當前窗口的內容 |
| focus() | 把鍵盤焦點給予一個窗口 |
| blur() | 把鍵盤焦點從頂層窗口移開 |
| moveBy(xnum, ynum) | 相對窗口的當前坐標將對象移動指定的像素 |
| moveTo(x, y) | 把窗口的左上角移動到一個指定的坐標 |
| resizeBy(w, h) | 按照指定的像素調整窗口的大小 |
| resizeTo(w, h) | 將窗口的大小調整到指定的寬度和高度 |
| scrollBy(xnum, ynum) | 按照指定的像素值來滾動內容 |
| scrollTo(x, y) | 將內容滾動到指定的坐標 |
| setInterval() | 每隔指定的時間執行代碼 |
| setTimeout() | 在指定的延遲時間之后來執行代碼 |
| clearInterval() | 取消 setInterval() 的設置 |
| clearTimeout() | 取消 setTimeout() 的設置 |
3、窗口操作
(1)、打開窗口
open() 方法可用于打開新窗口。
語法：window.open(url, name/target, 窗口設置, replace)
該方法的三個參數都是可選的，默認在新頁面打開一個空白頁。第一個參數可設置要打開窗口的路徑。第二個參數規定在何處打開新窗口，也可用于指定窗口的名稱。第三個參數設置窗口參數，多個參數可用逗號分隔。如果有第一個參數，后面兩個參數可省略，則在新頁面打開。第二個參數一般無需設置，如果要規定窗口的參數，則必須有第二個參數，必須為 '_blank'，或者用 '', 代替，并且距離屏幕頂部不能為 0，否則失效，如果設置了左邊距離，頂部可設置為 0。最后一個參數規定加載到窗口的 URL 是在窗口的瀏覽歷史中創建一個條目，還是替換瀏覽器歷史中的當前條目，值為 true 或 false， 值為 true 時 URL 替換瀏覽歷史中的當前條目，為 false 時 URL 在瀏覽歷史中創建新的條目。
下表是一些常用的窗口設置參數：
參數 | 值 | 說明 |
top | Num | 新窗口距屏幕頂部的距離 |
left | Num | 新窗口距屏幕左端的距離 |
width | Num | 新窗口的寬度 |
height | Num | 新窗口的高度 |
menubar | yes/no/1/0 | 窗口是否有菜單欄，默認是yes |
scrollbars | yes/no/1/0 | 窗口是否有滾動條，默認是yes |
toolbar | yes/no/1/0 | 窗口是否有工具欄，默認是yes |
status | yes/no/1/0 | 窗口是否有狀態欄，默認是yes |
location | yes/no/1/0 | 窗口是否顯示地址欄，默認是yes |
resizable | yes/no/1/0 | 是否允許改變窗口大小，默認是yes |
directories | yes/no/1/0 | 是否添加目錄按鈕，默認是yes |
實例A：點擊按鈕，在新窗口打開上海尚學堂首頁，寬 600，高 400，距屏頂 0 像素，屏左 10 像素。
<script>
<script>
function printpage(){
window.print();
}
</script>
<script>
function printpage(){
window.print();
}
</script>
（3）、關閉窗口
window.close() 方法可用于關閉當前窗口。
//點擊按鈕關閉當前窗口 <input type="button" value="關閉窗口"> |
該方法在 Chrome 下運行正常。IE 下彈窗提示：你查看的網頁正在試圖關閉選項卡，是否關閉選項卡？點擊否，不關閉，點擊是，關閉窗口。在 FF 下會報錯，因為在 FF 下不允許腳本關閉非腳本打開的窗口，也就是不能關閉一個用戶自己打開的窗口，只能關閉由 open 打開的窗口。所以可以先用 open 打開，再關閉，這樣就能解決 FF 下不能關閉的問題。這就需要創建兩個文檔來演示該問題：第二個文檔使用上面實例保存為 close.html，第一個文檔如下：
//先用open打開保存的文檔，然后再點擊關閉窗口按鈕，效果就達到了 <input type="button" value="打開窗口"> |
FF 瀏覽器的安全機制比較高，不能關閉用戶打開的窗口，在網上也沒找有找到什么好的辦法，只能修改瀏覽器的默認配置，顯然這是不可取的。上面的辦法比較笨，另辟蹊蹺不能關閉用戶打開的，那就自己 open 一個再 close，但這還是比較實在的方法，至少目的是達到了。
在 IE 下可使用下面的代碼關閉當前窗口，不彈窗提示。同時也適用于 Chrome。這里使用 a 標簽在 FF 下可以看到報錯，使用按鈕則沒有報錯信息。
<a href="javascript：window.opener=null;window.open('', '_self');window.close();">關閉a> |
實例G：關閉新打開的窗口
<body> <input type="button" value="打開"> <input type="button" value="關閉"> <script> function openWin(){ newWin = window.open('http://www.shsxt.com/', '', 'width=400,height=300,top=200'); } function closeWin(){ newWin.close(); } script> body> |
實例H：檢查新窗口是否已關閉
<body> <input type="button" value="打開'"> <input type="button" value="關閉"> <input type="button" value="是否關閉"> <p id="p1">p> <script>
var newWin;
function openWin(){ newWin = window.open('', '', 'width=400,height=300,top=200');
}
function closeWin(){ if(newWin){ newWin.close(); }
}
var oP = document.getElementById('p1');
function checkWin(){ if(!newWin){ oP.innerHTML = '新窗口還沒被打開！'; } else{ if(newWin.closed){ oP.innerHTML = '新窗口已關閉！'; } else{ oP.innerHTML = '新窗口未關閉！'; } }
} script> body> |
4、瀏覽器信息
window.navigator 對象獲取包含有關訪問者瀏覽器的信息。該屬性在使用時可以不加 window 前綴。
<body>[/font][/color][/align][align=left][color=rgb(0, 0, 0)][font="] <div id="div1">div> <script> txt = '<p>Browser CodeName（瀏覽器代碼名稱）: ' + navigator.appCodeName + 'p>'; txt+= '<p>Browser Name（瀏覽器名稱）: ' + navigator.appName + 'p>'; txt+= '<p>Browser Version（瀏覽器版本）: ' + navigator.appVersion + 'p>'; txt+= '<p>Cookies Enabled（啟用Cookies）: ' + navigator.cookieEnabled + 'p>'; txt+= '<p>Platform（操作平臺）: ' + navigator.platform + 'p>'; txt+= '<p>User-agent header（由客戶機發送服務器的 user-agent 頭部信息）: ' + navigator.userAgent + 'p>'; txt+= '<p>User-agent language（客戶機代理語言）: ' + navigator.systemLanguage + 'p>';
document.getElementById('div1').innerHTML=txt; script> body> |
其中最常用的屬性是 navigator.userAgent，返回用戶代理頭的字符串表示(就是包括瀏覽器版本信息等的字符
<script> document.write(navigator.userAgent); script> |
到此，相信大家對“JavaScript BOM知識點有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
