iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 10
1
自我挑戰組

重新開始的Vue.js 30day系列 第 11

從頭開始的 Javascript 認識 --bom day10

從頭開始的 Javascript 認識 bom day10

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

  • 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);


上一篇
從頭開始的Javascript 入門 -localStorage day9
下一篇
this的作用和使用方法 day12
系列文
重新開始的Vue.js 30day21

尚未有邦友留言

立即登入留言