BOM(Browser Object Model，瀏覽器物件模型)

BOM處理瀏覽器視窗和框架，透過JavaScript直接跟瀏覽器溝通或做操作。

瀏覽器核心是window物件，window 物件提供的屬性主要為 document、location、navigator、screen、history 以及 frames。

window

• 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() 改變瀏覽器視窗大小

screen

存取使用者的螢幕畫面資訊

• screen.width / screen.height 螢幕的寬/高
• screen.availWidth / screen.availHeight取得使用者瀏覽器寬度/高度
• screen.colorDepth 使用者螢幕的色彩深度
• screen.pixelDepth 使用者螢幕的像素深度/位數

location

存取瀏覽器頁面的網址(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) 會被新的網頁取代掉，讓使用者無法回上一頁

history

可以操作瀏覽器的上一頁、下一頁

• history.back() 回到上一頁
• history.forward() 下一頁

彈出框

• alert(message) 警告框

• confirm(message) 確認框

  var yes = confirm('你確定嗎？');
  
  if (yes) {
      alert('你按了確定按鈕');
  } else {
      alert('你按了取消按鈕');
  }
  

• prompt(message, default) 提示框

  var name = prompt('請輸入你的名字');
  alert('Hello ' + name);
  

Timing

• 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()執行