Landy Blog
0%

JavaScript學徒篇-BOM

發表於 更新於 分類於

瀏覽器功能簡介

BOM (Browser Object Model)
我們可以利用BOM元件來了解瀏覽器的資訊。
注意!! 通常我們都是擷取網頁的資訊，但是，
BOM元件是可以得知瀏覽器的資訊，像是，使用者目前是不是有網際網路連線的狀態。

回上頁功能實作

這個小節就介紹History這個BOM元件的功能。
在HTML檔案裏面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---HTML---
<a href="b_page.html">到下一頁</a>
<a href="#" id="next">到下一頁(JS版本)</a>

---JavaScript---
<script>
   document.getElementById('.next').onclick = function(){
      window.history.forward();
   }
</script>

---在b_page.html中---
<a href=#" id="back">回到上一頁</a>

<script>
   document.getElementById("back").onclick = function(){
      window.history.back();
}
</script>

以上的範例你可以看到在Javascrip中使用的BOM元件是history，
並使用了history的back()和forward()，兩種指令，分別代表回到上一頁和前往下一頁的功能。

透過 JS 設計列印功能

在這一小節中，介紹了三種功能，

  1. 分別為呼叫列印功能 window.print();
  2. 擷取瀏覽器location資訊功能 location;
    其中，location有一個href，當你在這個屬性裡面塞入你想要移動到的頁面網址，
    你就可以移動到那個網頁喔~~
    例
    1
    location.href = "https://www.google.com/";
  3. 移動到特定網頁的功能window.open("https://www.google.com/");，open裡面就塞你想移動到哪個網頁

動態擷取瀏覽器高度 - innerHeight

這一小節的innerHeight的功能，
用在當設計師希望最開頭的banner能一直佔滿瀏覽器當下的畫面，
不管使用者將瀏覽器縮小或放大，除非使用者往下滑離開那個banner的區域範圍。

當使用者縮小或放大瀏覽器時，網頁的當下畫面高度值會改變，
此時，就可以用innerHeight來擷取到改變完後的網頁畫面的高度值，
並將這個高度值塞到banner區塊的高度屬性內，如此，就能達成囉~~

由以上的例子可以看到，
在javascript檔案中，利用當瀏覽器觸發onresize的事件時，
就會將網頁的高度塞給banner的高度，如此，就可以動態的改變banner的大小，
進而達到banner不管瀏覽器被放大或縮小，都可以占滿網頁版面的效果。