JS趴趴往上走-BOM

-

BOM

BOM(Browser Object Model，瀏覽器物件模型)是用來操作瀏覽器功能，BOM沒有自己的一套規範，不像JavaScript的規範是ECMAScript而DOM的規範是W3C，在DOM模型還沒出現前BOM模型就已經存在了，所以也可以被稱為Level 0 DOM

BOM主要核心為window物件，所有的BOM都可透過window來存取，也就是在ECMAScript的全域變數擔任重要腳色，負責管理JavaScript和瀏覽器的通訊，而window物件提供的屬性主要為:document、location、navigator、screen、history、frames


由於window是最頂層的物件，所以呼叫window下屬/方法可不必明確指明window

例如我們在全域變數宣告一個a; 但它其實是window.a

 var a=123;
 console.log(a);//123
 console.log(window.a);//123

還有我們常用的alert()也是window下的函式方法

 var a=123;
 alert(a);//123
 alert(window.a);//123

示範部分window屬性

window.history

提供了進入瀏覽歷史的方式,可以在歷史紀錄中回上一步或到下一步

回到上一頁:

 window.history.back();

移動到下一頁:

 window.history.forward();

或者使用go()從頁面的 session history紀錄中載入特定紀錄，以目前頁面的相對位置而定使前往上一頁或下一頁

  //回到上一頁
  window.history.go(-1);

  //刷新本頁
  window.history.go(0);

  //移動到下一頁
  window.history.go(1);


window.print()

列印功能

可放進函式，觸發此屬性

 function myPrint() {
   window.print();
 }
 
 myPrint();

window.location

可獲得當前頁面網址，並將瀏覽器重定到新頁面;除了可以跳轉外，還提供了很多讀取所在網址的相關資訊

//回傳當前頁面的網址
window.location.href;

//跳轉其他頁面
window.location.href="網址";
window.location.assign("網址")  
window.location.replace("網址")//使用replace()到其他頁面的話，無法退回到原頁面。

//若希望頁面重新載入一遍而不是重新提交，被replace的頁面每次都在服務端重新生成
window.location.replace(location.href)

//回傳虛擬主機的域名
window.location.hostname

//回傳當前頁面的路徑名
window.location.pathname 

//回傳使用的Web協議（http：或https ：）
window.location.protocol 

//刷新本頁
location.reload()

window.open()

開啟新頁面

第一個參數為網址，後面參數可以調整開啟的頁面資訊，若未填寫則預設為另開新視窗

 window.open('網址');

 window.open('http://tw.yahoo.com','Yahoo',config='height=500,width=600');

innerheight

視窗內部高度，在IE8(包含)之前，無法使用


innerwidth

視窗內部寬度，在IE8(包含)之前，無法使用
See the Pen
innerHeight+innerWidth by yanennn (@yennnnn)
on CodePen.



資料來源:
https://www.happycoding.today/posts/43
http://icodding.blogspot.com/2015/12/javascript-bom-dom.html
https://ithelp.ithome.com.tw/articles/10190062

留言

張貼留言