如何在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方法將提供變數、函式或方法的資料型別,例如,它會輸出字串、數字、物件、函式或任何其他型別的資料型別。
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP