# Window - 瀏覽器功能探索 (BOM)

用法 window.方法

## window.screen - 取得目前視窗大小

## window.location - 取得目前網址資訊
- window.location.hash - 抓網址 # 參數
- window.location.href - 轉址
- window.open - 另開新分頁
window.open(' 新視窗的網址 ', '新視窗的名稱', config='height=高度,width=寬度');

window.open config 常用參數表
|參數 |參數值與說明|
|----------|-----------------------------------------------------------|
|toolbar |指定工具列是否顯示，預設是顯示，如果要設為不顯示，寫法是 toolbar=no。|
|scrollbars|指定 scroll bars 是否顯示，要顯示寫法是 scrollbars=yes，不顯示寫法是 scrollbars=no。|
|resizable |訪客是否可以自己調整視窗大小，預設是可以，如果要設為不能調整，寫法是 resizable=no。|
|location |是否顯示網址列，預設是顯示，如果不要顯示，寫法是 location=no。|
|menubar |是否顯示目錄欄位，預設是會顯示，如果不要顯示，寫法是 menubar=no。|
|status |是否顯示狀態列，預設是顯示，如果不要顯示，寫法是 status=no。|
|left |距離左邊的距離，單位是 pixels。|
|top |距離上面的距離，單位是 pixels。|

<button type="button" id="location1">location</button>
<button type="button" id="location2">location hash</button>
<button type="button" id="location3">location href</button>
<button type="button" id="location4">window open</button>

<script>
  document.getElementById('location1').onclick = function(){
    console.log(window.location);
  }
  document.getElementById('location2').onclick = function(){
    console.log(window.location.hash);
  }
  document.getElementById('location3').onclick = function(){
    window.location.href = "https://tw.yahoo.com/"
  }
  document.getElementById('location4').onclick = function(){
    window.open(' http://tw.yahoo.com ', 'Yahoo', config='height=500,width=500,top=50,left=50');
  }
</script>


## window.history - 取得瀏覽紀錄
window.history.length - 目前瀏覽總頁數
forward() - 到下一頁
back() - 返回上一頁
- A.html

<h1>A Pages</h1>
<a href="b.html">B Pages</a>
<br />
<a href="#" id="next">B Pages (JS版本)</a>

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

- B.html

<h1>B Pages</h1>
<a href="#" id="back">回到 A</a>

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


## window.frames - 取得網頁中所有內嵌網頁的 frame 或 iframe> 的集合物件

## window.navigator - 取得瀏覽器版本或是網路狀態

## window.print - 列印功能

<button type="button" id="print">列印</button>

<script>
  document.getElementById('print').onclick = function(){
    window.print()
  }
</script>


## window 動態擷取瀏覽器高度 & 寬度

- window.innerHeight - 視窗顯示高度
- window.outerHeight - 瀏覽器總高度


視窗顯示高度 - innerHeight：<span id="text0"></span> px<br />
視窗總高度 - outerHeight：<span id="text1"></span> px

<script>
  var text0 = document.getElementById('text0')
  var text1 = document.getElementById('text1')
  text0.textContent = window.innerHeight
  text1.textContent = window.outerHeight
  window.onresize = function(){
    text0.textContent = window.innerHeight
    text1.textContent = window.outerHeight
  }
</script>


- window.innerWidth - 視窗顯示寬度
- window.outerWidth - 瀏覽器總寬度


視窗顯示寬度 - innerWidth：<span id="text0"></span> px<br />
視窗總寬度 - outerWidth：<span id="text1"></span> px

<script>
  var text0 = document.getElementById('text0')
  var text1 = document.getElementById('text1')
  text0.textContent = window.innerWidth
  text1.textContent = window.outerWidth
  window.onresize = function(){
    text0.textContent = window.innerWidth
    text1.textContent = window.outerWidth
  }
</script>