ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptで現在の実行環境がどのブラウザであるかを確認するにはどうすればよいですか?
JavaScriptで現在の実行環境がどのブラウザであるかを確認するにはどうすればよいですか?
- 王林転載
- 2023-09-04 19:37:021340ブラウズ
実行環境は、コードが実行される環境です。これは、どのグローバル オブジェクトにアクセスできるかをコードに伝え、その結果にも影響します。 JavaScript コードは、Node.js、Service Worker、Web ブラウザーなど、さまざまな種類の環境で実行できます。したがって、JavaScript を使用してコーディングを開始するために、追加のソフトウェアをインストールする必要はありません。すべての Web ブラウザには JavaScript エンジンが搭載されています。作成したスクリプトは任意のブラウザで簡単に実行できますが、ECMAScript (ES6) 機能のすべてのルールに確実に準拠していることが保証されます。
ここでは、コードがどのランタイム環境で実行されているかを検出します。 Node.js で記述された JavaScript コードは、ブラウザ環境、Service Worker 環境、Node.js 環境自体など、あらゆる環境で実行できます。別の環境でコードを実行する場合は、その環境の要件をすべて満たす必要があります。
ランタイム環境がブラウザであるかどうかを確認する
コードの一部がランタイム環境であるかどうかを確認するには直接的な方法はありません。したがって、実行環境を確認するには、それぞれの環境に合わせていくつかの条件を設定し、コードがどの環境で実行されているかを確認する必要があります。 一段代码是不是浏览器没有直接的方法。因此，要检查运行时环境，我们必须设置一些条件来匹配每个环境，并检查我们的代码在哪个环境中运行。
構文現在の実行環境がブラウザであるかどうかを確認するための構文は次のとおりです。type of window === "object"上記のステートメントが true を返す場合、現在の実行環境はブラウザです。 、そうでない場合はいいえ。 アルゴリズム
- ステップ 1 - ウィンドウの条件タイプ === "オブジェクト" を確認します。
- ステップ 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>さまざまな実行環境の確認環境ごとに条件が異なります。
ブラウザ環境の場合、ウィンドウのタイプは「オブジェクト」と等しい必要があります。
node.js環境の場合、プロセスの種類が「オブジェクト」であるか、「require」の種類が「オブジェクト」であるかという2つの条件を確認する必要があります。 "関数" "。
- 環境は両方の条件が true の場合にのみ、node.js になります。 環境＃＃＃。
- 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"
アルゴリズム
- 最初のステップ
- - まず、ランタイム環境が 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 のこの機能を使用すると、Web ブラウザーでのみ実行される Web ページを使用しながら、任意の環境でコードを作成し、他のさまざまな環境 (特に Web ブラウザー) でコードを実行できます。
注-ここで使用されるメソッド タイプは、文字列、数値、オブジェクト、関数、またはその他のタイプの場合と同様に、変数、関数、またはメソッドのデータ タイプを示します。 data Type は同じ出力を提供します。
以上がJavaScriptで現在の実行環境がどのブラウザであるかを確認するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。