BOM(Browser Object Model,瀏覽器物件模型)
BOM處理瀏覽器視窗和框架,透過JavaScript直接跟瀏覽器溝通或做操作。
瀏覽器核心是window物件,window 物件提供的屬性主要為 document、location、navigator、screen、history 以及 frames。
window.innerWidth / window.innerHeight 視窗的可見寬度/高度
window.outerWidth 整個視窗的寬度
window.open(strUrl, strWindowName, [strWindowFeatures]) 瀏覽器開新視窗
strUrl:開啟網址
strWindowName:_blank, _parent, _self, _top
strWindowFeatures:新視窗的屬性(width, height, left, top....)
window.close() 關閉瀏覽器視窗
window.resizeTo() 改變瀏覽器視窗大小
存取使用者的螢幕畫面資訊
存取瀏覽器頁面的網址(URL)資訊
location.href = url 取得當前網頁的網址 (URL)、網頁轉址
location.hostname 取得當前網頁的網域名稱
location.pathname 取得當前網頁的網址路徑
location.search 取得當前網頁的網址參數
location.hash 取得當前網址的 hash 值
location.assign(url) 在當前視窗載入一個新的網頁
Location.reload(forcedReload) 重新整理網頁
forcedReload:
true 用來強制瀏覽器從 server 取得最新的資料
false(預設),會優先從瀏覽器暫存檔 (cache) 中取得網頁資料
location.replace(url) 當前網頁的瀏覽紀錄 (History) 會被新的網頁取代掉,讓使用者無法回上一頁
可以操作瀏覽器的上一頁、下一頁
alert(message) 警告框
confirm(message) 確認框
var yes = confirm('你確定嗎?');
if (yes) {
alert('你按了確定按鈕');
} else {
alert('你按了取消按鈕');
}
prompt(message, default) 提示框
var name = prompt('請輸入你的名字');
alert('Hello ' + name);
setTimeout(function, milliseconds);
var timeout = setTimeout(alertInfo, 5000);
function alertInfo() {
alert('時間到!');
}
clearTimeout(myVar) 停止setTimeout()執行
timeoutID = setTimeout(function, milliseconds);
clearTimeout(timeoutID);
setInterval(function, milliseconds) 每隔一段時間重複執行
var intervalID = setInterval(function() {
alert('十秒鐘又到了!');
}, 1000);
clearInterval() 停止setInterval()執行