iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
0
Modern Web

用30天了解javascript系列 第 25

[用30天了解javascript]Day25.BOM

  • 分享至 

  • xImage
  •  

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


上一篇
[用30天了解javascript]Day24.瀏覽器資料儲存
下一篇
[用30天了解javascript]Day26.傳輸資料格式JSON 、XML
系列文
用30天了解javascript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言