從頭開始的 Javascript 認識 bom day10

這次要講瀏覽器要對Javascript 如何進行操作>
廣泛來說，在瀏覽器上的Ｊavascript 實際包含了

• Javascrip 核心
• BOM 瀏覽器物件模型 Browser Object Model
• DOM 文件物件模型 Document Object Model

BOM 是什麼？

browser object model 瀏覽器物件模型是指瀏覽器所有功能的核心。

window - 目前的瀏覽視窗或頁面
document- 目前網頁頁面
history- 瀏覽紀錄中的頁面
location- 目前網頁頁面的 url位置
navigation- 瀏覽器相關資訊
screen- 裝置的顯示器相關資訊

範例

window 物件的print 方法可使瀏覽器顯示列印對話框：
window.print();

screen 物件的width 特性 可取得裝置顯示器解析度的寬度：

window.screen.width;

實作一

回上頁功能實作

<h1>產品頁面</h1>
 ​
   
     <a href="index.html" class="back-page">返回主頁面(請點我)</a>
 
 ​
   <script>
     document.querySelector('.back-page').onclick = function () {
       window.history.back();
     }
   </script>

實作二

document.getElementById('print').onclick = function () {
    window.print()  //實作列印的功能
}
document.getElementById('locat').onclick = function () {
    console.log(location)  // //瀏覽location 資訊
}
document.getElementById('open').onclick = function () {
    window.open('http://www.google.com.tw') //開啟新的瀏覽器視窗
}

window.locaiton :window 目前的頁面url
window.innerHeight 視窗的高度 （不包含chrome 瀏覽器 ／使用者介面部分）
window.innerWidth 視窗的寬度 不包含chrome 瀏覽器 ／使用者介面部分）
都以像素為單位

實作三

動態擷取視窗高度

document.querySelector('.hero').style.height =wwindow.innerHeight+"px"

window.onresize = function(){
  document.querySelector('.hero').style.height=window.innerHeight+"px";
}

//onreseize 是指拖動瀏覽器，每觸發一次onresize 就是重新計算一次

操作瀏覽器物件

var msg = '<h2> broswer window </h2><p>width:'+window.innerWidth+'</p>';
msg += '<p>height:'+window.innerHeight+' </p>';
msg += '<h2>history:</h2><p>items:'+window.innerHeight+' </p>';
msg += '<h2>screen:</h2><p>width:'+window.innerHeight+' </p>';
msg += '<p>height:'+window.screen.height+' </p>';

var el =document.getElementById('info');
el.innerHTML =msg;
alert('current page:'+ window.location);