iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 26
0

前言

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

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/");
};

次回

預計進行 AJAX 的部分


上一篇
Day25 - 資料儲存與更新(02)
下一篇
Day27 - AJAX(01)
系列文
JavaScript 新手筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言