如何检查当前运行时环境是否是 JavaScript 中的浏览器?
运行时环境是将执行代码的环境。它告诉您的代码可以访问哪些全局对象,并且还会影响其结果。JavaScript 代码可以在不同类型的环境中运行,其中一些是 Node.js、Service Workers 或 Web 浏览器。因此,要开始使用 JavaScript 编码,您无需安装任何其他软件。每个 Web 浏览器都带有 JavaScript 引擎。您只需在任何浏览器中运行您编写的脚本,但它可确保它遵循 ECMAScript(ES6)功能的所有规则。
在这里,我们将检测我们的代码在哪个运行时环境中运行。用 Node.js 编写的 JavaScript 代码也可以在任何环境中运行,无论是浏览器环境、Service Workers 环境还是 Node.js 环境本身。在不同的环境中运行代码时,您需要满足该环境的所有需求。
检查运行时环境是否为浏览器
要检查代码的运行时环境是否为浏览器,没有直接的方法。因此,要检查运行时环境,我们必须设置一些条件以匹配每个环境,并检查我们的代码在哪个环境中运行。
语法
以下是检查当前运行时环境是否为浏览器的语法 -
窗口类型 === "object"
此处,如果上述语句返回 true,则当前运行环境为浏览器,否则为否。
算法
- 步骤 1 - 检查条件 typeof window === "object"。
- 步骤 2 - 如果返回 true,则显示一条消息,因为当前运行环境为窗口。
- 步骤 2 - 如果返回 false,则显示一条消息,因为当前运行环境不是窗口。
示例
在下面的示例中,我们检查当前运行环境是否为浏览器。
<!DOCTYPE html> <html> <body> <div> <h2>检查当前运行环境是否为浏览器</h2> <p>点击下方按钮可查看当前运行环境是否为浏览器</p> <button onclick = "isBrowser()"> 检查运行环境 </button> <p id="result1"></p> <p id="result2"></p> </div> <script> function isBrowser() { var text="运行时环境"; // 检查运行时环境是否为浏览器 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 的类型是否为"函数"。
只有当这两个条件都为真时,环境才是node.js 环境。
对于服务工作线程环境,我们检查导入脚本的类型是否等于"函数"或不等于函数时,则只有环境是服务工作者环境。
语法
以下是检查运行时环境的语法 -
// 运行时环境是否为 Node.js 的条件 typeof process === "object" &&typeof require === " // 运行时环境是否为服务工作者的条件 typeof importScripts === "function // 运行时环境是否为浏览器的条件 typeof window === "object"
算法
- 步骤 1 - 首先我们检查运行时环境是否为 Node.js。如果为真,则显示正确的消息。
- 步骤 2 - 接下来我们检查当前运行时环境是否为服务工作者。如果为真,则显示正确的消息。
- 步骤 3 − 最后,我们检查运行时环境是否为浏览器。如果为真,则显示正确的消息。
示例
我们可以使用以下代码来检查程序的运行时环境。
<!DOCTYPE html> <html> <body> <div> <h2>检查当前运行环境</h2> <p>点击下方按钮了解运行环境</p> <button onclick = "isBrowser()"> 检查运行环境 </button> <p id="result1"></p> <p id="result2"></p> <p id="result3"></p> </div> <script> function isBrowser() { var text="运行时环境"; // 检查运行时环境是否为 Node.js if (typeof process === "object" &&typeof require === "function") { document.getElementById("result1").innerHTML = text + "是 node.js"; } // 检查运行时环境是否为 Service Worker if (typeof importScripts === "function") { document.getElementById("result2").innerHTML = text + " 是 service worker"; } // 检查运行时环境是否为浏览器 if (typeof window === "object") { document.getElementById("result3").innerHTML = text + " is Browser"; } } </script> </body> </html>
单击按钮"检查运行时环境"后,屏幕将根据程序运行的环境显示输出。
JavaScript 的这一特性允许您在任何环境中编写代码,并在任何其他不同的环境中运行它,尤其是在使用仅在 Web 浏览器中运行的网页时在 Web 浏览器中运行它。
注意 −此处使用的方法类型将为我们提供变量、函数或方法的数据类型,就像它以字符串、数字、对象、函数或任何其他类型的数据类型给出输出一样。