Day26 - BOM - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 26

自我挑戰組

JavaScript 新手筆記系列第 26 篇

Day26 - BOM

11th鐵人賽 javascript

hokou

2019-10-11 23:11:38

847 瀏覽

分享至

前言

今天來說明一些跟瀏覽器有關的功能

BOM

BOM = Browser Object Model = 瀏覽器物件模型
BOM 是屬於瀏覽器的功能，與網頁不太相關，主要是 window 物件，包含 document、screen、history 等，因此跟 DOM 比起來，DOM 屬於 BOM 裡面的分支
BOM 的最上層就是 window 物件，window 物件的使用可以不經過宣告，而直接使用，如 window.screen.width 可直接寫 screen.width
其他參考資料：JavaScript入門系列：BOM和DOM筆記

常用特性

document：之前在 DOM 已經說了不少
screen：裝置的顯示相關，如 screen.width 可以知道目前裝置解析度的寬度
location：網頁路徑相關，如 location.href 可以知道目前的網址路徑
navigator：瀏覽器資訊相關，如 navigator.online 可以知道目前是否連線狀態
history：瀏覽記錄相關，如 history.length 可以知道瀏覽記錄的筆數

常用方法

window.alert()：跳出一個彈跳視窗
window.open()：開啟新的瀏覽器視窗
window.print()：開啟瀏覽器的列印功能

練習

回到上一頁
- 一開始瀏覽器尚未有記錄，因次第一次先人工點選下一頁，之後就可以在 2 頁間往返
- 實作時一開始將上一頁與下一頁的功能放在同一個 JS 檔案上，可能因此互相干擾，無法順利完成，後來將功能各自放在不同的 JS 檔案或是各自的 HTML 上才成功(HTML 上 src="" 連結記得移除)

a.html

<body>
    <div>
        <a href="b.html">連到下一頁</a>
        <input type="button" id="next" value="下一頁">
    </div>
    <script>
    document.getElementById("next").onclick = function(){
    window.history.forward();
};
    // 找到 id = next 點擊時執行 history.forward()
    </script>
</body>

b.html

<body>
    <div>
        <input type="button" id="back" value="上一頁">
    </div>
    <script>
    document.getElementById("back").onclick = function(){
    window.history.back();
};
    // 找到 id = back 點擊時執行 history.back()
    </script>
</body>

開啟列印功能
開啟新視窗

index.html

<body>
    <input type="button" id="print" value="列印">
    <input type="button" id="open" value="開新視窗">
    <script src="JS/test.js"></script>
</body>

test.js

// 找到 id print 在點擊時開啟 列印功能
document.getElementById("print").onclick = function(){
    window.print();
};

// 找到 id open 在點擊時開啟 新視窗
document.getElementById("open").onclick = function(){
    window.open("https://www.google.com/");
};