如何在JavaScript中檢查當前執行環境是否為瀏覽器?


執行環境是指執行程式碼的環境。它決定了程式碼可以訪問哪些全域性物件,並影響其結果。JavaScript程式碼可以在不同型別的環境中執行,例如Node.js、Service Workers或Web瀏覽器。因此,開始編寫JavaScript程式碼無需安裝任何其他軟體。每個Web瀏覽器都自帶JavaScript引擎。您可以簡單地在任何瀏覽器中執行編寫的指令碼,但它確保遵循ECMAScript (ES6)功能的所有規則。

在這裡,我們將檢測程式碼在哪個執行環境中執行。在Node.js中編寫的JavaScript程式碼也可以在任何環境中執行,無論是瀏覽器環境、Service Worker環境還是Node.js環境本身。在不同的環境中執行程式碼時,需要匹配該環境的所有需求。

檢查執行環境是否為瀏覽器

檢查程式碼的執行環境是瀏覽器還是其他環境,沒有直接的方法。因此,為了檢查執行環境,我們必須設定一些條件來匹配每個環境,並檢查程式碼在哪個環境中執行。

語法

以下是檢查當前執行環境是否為瀏覽器的方法:

type of window === "object"

如果上述語句返回true,則當前執行環境為瀏覽器;否則不是。

演算法

  • 步驟1 - 檢查條件 `typeof window === "object"`。
  • 步驟2 - 如果返回true,則顯示訊息,表明當前執行環境為視窗。
  • 步驟2 - 如果返回false,則顯示訊息,表明當前執行環境不是視窗。

示例

在下面的示例中,我們檢查當前執行環境是否為瀏覽器。

<!DOCTYPE html>
<html>
<body>
   <div>
   <h2>Check if the Current Runtime Environment is Browser</h2>
   <p>Click the below button to know if the runtime environment is browser or not</p>
   <button onclick = "isBrowser()"> Check Runtime Environment </button>
   <p id="result1"></p>
   <p id="result2"></p>
   </div>
   <script>
      function isBrowser() {
         var text="Runtime environment";

         // Check if the runtime environment is a Browser
         if (typeof window === "object") {
            document.getElementById("result1").innerHTML = text + " is Browser";
         } else {
            document.getElementById("result2").innerHTML = text + " is NOT Browser";
         }
      }
   </script>
</body>
</html>

檢查不同的執行環境

每個環境都有不同的條件。

  • 對於瀏覽器環境,視窗的型別應等於“object”。

  • 對於node.js環境,我們必須檢查兩個條件:首先檢查程序的型別是否為“object”,以及require的型別是否為“function”。

  • 只有當這兩個條件都為真時,環境才是node.js環境

  • 對於Service Worker環境,我們檢查importScripts的型別是否等於“function”。如果等於函式,則環境才是Service Worker環境。

語法

以下是檢查執行環境的語法:

// Condition if Runtime Environment is Node.js
typeof process === "object" &&typeof require === "

// Condition if Runtime Environment is Service Worker
typeof importScripts === "function

// Condition if Runtime Environment is Browser
typeof window === "object"

演算法

  • 步驟1 - 首先我們檢查執行環境是否為Node.js。如果是,則顯示相應的訊息。
  • 步驟2 - 接下來我們檢查當前執行環境是否為Service Worker。如果是,則顯示相應的訊息。
  • 步驟3 - 最後我們檢查執行環境是否為瀏覽器。如果是,則顯示相應的訊息。

示例

我們可以使用以下程式碼來檢查程式的執行環境。

<!DOCTYPE html>
<html>
<body>
   <div>
   <h2>Check the Current Runtime Environment</h2>
   <p>Click the below button to know the runtime environment</p>
   <button onclick = "isBrowser()"> Check Runtime Environment </button>
   <p id="result1"></p>
   <p id="result2"></p>
   <p id="result3"></p>
   </div>
   <script>
      function isBrowser() {
         var text="Runtime environment";

         // Check if the runtime environment is Node.js
         if (typeof process === "object" &&typeof require === "function") {
            document.getElementById("result1").innerHTML = text + " is node.js"; }

            // Check if the runtime environment is a Service worker

            if (typeof importScripts === "function") {
               document.getElementById("result2").innerHTML = text + " is service worker";
            }

            // Check if the runtime environment is a Browser
            if (typeof window === "object") {
               document.getElementById("result3").innerHTML = text + " is Browser";
            }
         }
   </script>
</body>
</html>

單擊“檢查執行環境”按鈕後,螢幕將根據程式執行的環境顯示輸出。

JavaScript的此功能允許您在任何環境中編寫程式碼,並在任何其他不同的環境中執行它,尤其是在使用僅在Web瀏覽器中執行的網頁時,在Web瀏覽器中執行。

注意 - 此處使用的typeof方法將提供變數、函式或方法的資料型別,例如,它會輸出字串、數字、物件、函式或任何其他型別的資料型別。

更新於:2022年7月26日

3K+ 瀏覽量

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.