JavaScript 非同步程式設計
JavaScript - 非同步程式設計
JavaScript - 回撥函式
JavaScript - Promise
JavaScript - Async/Await
JavaScript - 微任務
JavaScript - Promisification (Promise 化)
JavaScript - Promise 鏈式呼叫
JavaScript - 定時事件
JavaScript - setTimeout()
JavaScript - setInterval()

JavaScript - 視窗物件

JavaScript 的window物件代表瀏覽器的視窗。在 JavaScript 中，'window' 物件是一個全域性物件。它包含各種方法和屬性，我們可以使用它們來訪問和操作當前瀏覽器視窗。例如，顯示警報、開啟新視窗、關閉當前視窗等。

所有 JavaScript 全域性變數都是 window 物件的屬性。所有全域性函式都是 window 物件的方法。此外，當瀏覽器渲染 'iframe' 中的內容時，它會為瀏覽器和每個 iframe 建立一個單獨的 'window' 物件。

在這裡，您將學習如何使用 'window' 物件作為全域性物件，以及如何使用 window 物件的屬性和方法。

視窗物件作為全域性物件

由於 'window' 是 Web 瀏覽器中的全域性物件，因此您可以在程式碼中的任何位置使用 window 物件訪問全域性變數、函式、物件等。

讓我們透過下面的例子來理解它。

示例

在下面的程式碼中，我們在函式內部定義了 'num' 全域性變數和區域性變數。我們還定義了 'car' 全域性物件。

在 test() 函式中，我們使用 'window' 物件訪問全域性 num 變數的值。

<html>
<body>
   <div id = "output1">The value of the global num variable is: </div>
   <div id = "output2">The value of the local num variable is: </div>
   <div id = "output3">The value of the car object is: </div>
   <script>
      var num = 100;
      const car = {
         brand: "Honda",
         model: "city",
      }

      function test() {
         let num = 300;
         document.getElementById("output1").innerHTML += window.num;
         document.getElementById("output2").innerHTML += num;
         document.getElementById("output3").innerHTML += car.brand;
      }
      test();
   </script>
</body>
</html>

輸出

The value of the global num variable is: 100
The value of the local num variable is: 300
The value of the car object is: Honda

您也可以使用 'window' 物件將特定塊中的特定變數設為全域性變數。

視窗物件屬性

'window' 物件包含各種屬性，返回有關當前視窗的狀態和資訊。

下面，我們列出了 'window' 物件的所有屬性及其描述。您可以使用 'window' 作為引用來訪問這些屬性。

屬性名稱	屬性描述
closed	當特定視窗關閉時，它返回 true。
console	它返回視窗的控制檯物件。
customElements	它用於定義和訪問瀏覽器視窗中的自定義元素。
devicePixelRatio	它返回裝置的物理畫素比除以 CSS 畫素比。
document	它用於訪問當前視窗中開啟的 HTML 文件。
frames	它用於獲取當前視窗中開啟的視窗項，例如 iframe。
frameElement	它返回視窗的當前框架。
history	它用於獲取視窗的歷史物件。
innerHeight	它返回視窗的內部高度，不包括捲軸、工具欄等。
innerWidth	它返回視窗的內部寬度，不包括捲軸、工具欄等。
length	它返回當前視窗中 iframe 的總數。
localStorage	它用於訪問當前視窗的本地儲存。
location	它用於訪問當前視窗的 location 物件。
name	它用於獲取或設定視窗的名稱。
navigator	它用於獲取瀏覽器的 Navigator 物件。
opener	它返回對開啟當前視窗的視窗的引用。
outerHeight	它返回視窗的總高度。
outerWidth	它返回視窗的總寬度。
pageXOffset	它返回水平滾動網頁的畫素數。
pageYOffset	它返回您垂直滾動網頁的畫素數。
父視窗 (parent)	它包含當前視窗的父視窗引用。
排程程式 (scheduler)	它是使用優先順序任務排程的入口點。
螢幕 (screen)	它返回當前視窗的“screen”物件。
screenLeft	它返回當前視窗相對於螢幕的 x 座標位置（以畫素為單位）。
screenTop	它返回當前視窗相對於螢幕的 y 座標位置（以畫素為單位）。
screenX	它與 screenLeft 屬性類似。
screenY	它與 screenTop 屬性類似。
scrollX	它與 pageXOffset 類似。
scrollY	它與 pageYOffset 類似。
自身 (self)	它用於獲取視窗的當前狀態。
sessionStorage	它允許您訪問當前視窗的“sessionStorage”物件。
speechSynthesis	它允許您使用 Web 語音 API。
visualViewPort	它返回包含當前視窗視口的物件。
頂層視窗 (top)	它包含對最頂層視窗的引用。

這裡，我們將介紹一些屬性及其示例。

視窗物件的 OuterHeight/OuterWidth 屬性

視窗物件的 outerHeight 屬性返回視窗的高度，outerWidth 屬性返回視窗的寬度。

示例

在下面的程式碼中，我們使用了 outerHeight 和 outerWidth 屬性來獲取視窗的尺寸。您可以更改視窗的大小並觀察這些屬性值的更改。

<html>
<body>
   <p id = "output1">The outer width of the window is: </p>
   <p id = "output2">The outer height of the window is: </p>
   <script>
      const outerHeight = window.outerHeight;
      const outerWidth = window.outerWidth;
      document.getElementById("output1").innerHTML += outerWidth;
      document.getElementById("output2").innerHTML += outerHeight;
   </script>
</body>
</html>

輸出

The outer width of the window is: 1536
The outer height of the window is: 816

視窗物件的 ScreenLeft 屬性

視窗的 screenLeft 屬性返回當前視窗的左側位置。

示例

在以下程式碼的輸出中，您可以看到當前視窗的左側位置（以畫素為單位）。

<html>
<body>
   <div id = "output">Your browser window is left by:  </div>
   <script>
      const screenLeft = window.screenLeft;
      document.getElementById("output").innerHTML += screenLeft + " px.";
   </script>
</body>
</html>

輸出

Your browser window is left by: 0 px.

視窗物件方法

“window”物件也包含像屬性一樣的方法來操作當前瀏覽器視窗。

在下表中，我們介紹了“window”物件的方法及其描述。您可以使用“window”作為引用來訪問和呼叫以下方法以提高程式碼的可讀性。

方法名稱	方法描述
alert()	它用於向訪問者顯示警報訊息。
atob()	它將字串轉換為 Base-64 字串。
blur()	它將焦點從視窗中移除。
btoa()	它將 Base-64 字串解碼為普通字串。
cancelAnimationFrame()	它取消使用 requestAnimationFrame() 方法排程的動畫幀。
cancelIdleCallback()	它取消使用 requestIdCallback() 方法排程的回撥。
clearImmediate()	它用於清除使用 setImmediate() 方法指定的動作。
clearInterval()	它重置您使用 setInterval() 方法設定的計時器。
clearTimeout()	它停止您使用 setTimeout() 方法設定的超時。
close()	它用於關閉當前視窗。
confirm()	它顯示確認框以獲取使用者的確認。
focus()	它聚焦於當前活動視窗。
getComputedStyle()	它返回當前視窗計算後的 CSS 樣式。
getSelection()	它根據選定的文字範圍返回選擇物件。
matchMedia()	它返回一個新的 MediaQueryList 物件，您可以使用它來檢查文件是否匹配媒體查詢。
moveBy()	它相對於當前位置更改視窗的位置。
moveTo()	它絕對更改視窗的位置。
open()	它開啟一個新視窗。
postMessage()	它用於向視窗傳送訊息。
print()	它允許您列印視窗。
prompt()	它允許您顯示提示框以獲取使用者輸入。
requestAnimationFrame()	它幫助您告訴瀏覽器您想要執行動畫，以便瀏覽器可以在下一次重繪之前更新動畫。
requestIdleCallback()	它設定在瀏覽器空閒時呼叫的回撥函式。
resizeBy()	它按特定畫素數調整視窗大小。
resizeTo()	它更改視窗的大小。
scrollTo()	它將視窗滾動到絕對位置。
scrollBy()	它相對於當前位置滾動視窗。
setImmediate()	它分解長時間執行的操作，並在瀏覽器完成其他操作後立即執行回撥函式。
setInterval()	它用於每隔一段時間執行特定操作。
setTimeout()	它用於在特定時間後執行特定操作。
stop()	它停止視窗的載入。

這裡，我們將介紹一些方法及其示例。

JavaScript window.alert() 方法

window.alert() 方法允許您顯示包含訊息、警告等的彈出對話方塊。它接受字串文字作為引數。

示例

在下面的示例中，當您單擊按鈕時，它將呼叫 alert_func() 函式並在中間頂部顯示彈出框。

<html>
<body>
   <button onclick = "alert_func()"> Execute Alert </button>
   <script>
      function alert_func() {
         window.alert("The alert_func funciton is executed!");
      }
   </script>
</body>
</html>

JavaScript window.open() 方法

window.open() 方法用於開啟一個新視窗。它接受一個 URL 作為引數，您需要在新視窗中開啟該 URL。

示例

在下面的程式碼中，我們使用 window.open() 方法在新視窗中開啟瀏覽器。您可以看到程式碼在新視窗中打開了“tutorialspoint”網站的主頁。

<html>
<body>
   <button onclick = "openWindow()"> Open New Window </button>
   <script>
      function openWindow() {
         window.open("https://tutorialspoint.tw/");
      }
   </script>
</body>
</html>

JavaScript window.print() 方法

window.print() 方法允許您列印網頁。

示例

在下面的程式碼中，單擊按鈕以列印網頁。

<html>
<body>
   <h2> Hello World! </h2>
   <button onclick = "printPage()"> Print Webpage </button>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>

列印頁面