搜尋

首頁 >web前端 >js教程 >JavaScript如何檢查目前運行環境是瀏覽器？

JavaScript如何檢查目前運行環境是瀏覽器？

王林
王林轉載
2023-09-04 19:37:021332瀏覽

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"。
  • STEP 2 - 如果傳回 true，則顯示一則訊息，因為目前執行時間環境是一個視窗。
  • STEP 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>

檢查不同的執行階段環境

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

  • 對於瀏覽器環境，視窗的類型應該等於「物件」。

  • 對於node.js 環境，我們必須檢查2 個條件首先是檢查進程的類型是否為“物件”，並且require 的類型是否為“函數」。

  • 只有當這兩個條件都為真時，環境才是節點.js 環境。

  • 對於服務工作者環境，我們檢查導入腳本的類型是否等於「函數」當它等於一個函數時，則只有該環境是服務工作線程環境。

語法

以下是檢查執行階段環境的語法- 

// 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。如果為 true，則顯示正確的訊息。
  • 第 2 步 - 接下來我們檢查目前執行時間環境是否為 Service Worker。如果為 true，則顯示正確的訊息。
  • 第 3 步 - 最後我們檢查運行時環境是否為瀏覽器。如果為true，則顯示正確的訊息。
範例

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

<!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 的此功能可讓您在任何環境中編寫程式碼並在任何其他不同環境中執行它，特別是在網頁瀏覽器中，同時使用僅在網頁瀏覽器中執行的網頁。

注意- 這裡使用的方法類型將為我們提供變數、函數或方法的資料類型，就像它以字串、數字、物件、函數或任何其他類型的數據類型提供輸出一樣。

以上是JavaScript如何檢查目前運行環境是瀏覽器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除
上一篇：Ajax 與 JavaScript 函式庫和執行時間環境有何不同？下一篇：Ajax 與 JavaScript 函式庫和執行時間環境有何不同？

相關文章

看更多