Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to check the current runtime environment is a browser in JavaScript?
A runtime environment is an environment where your code executes. It determines what global objects your code can access and affects its behavior. JavaScript can run in different environments like Node.js, Service Workers, or web browsers. Each browser comes with a JavaScript engine, so you can run JavaScript directly without additional software.
Sometimes you need to detect which runtime environment your code is running in to ensure compatibility and use environment-specific features appropriately.
Basic Browser Detection
To check if the runtime environment is a browser, we can test for the presence of the global window object, which is unique to browser environments.
Syntax
typeof window === "object"
If this condition returns true, the current runtime environment is a browser.
Example: Simple Browser Check
<!DOCTYPE html>
<html>
<body>
<h2>Check if Runtime Environment is Browser</h2>
<p>Click the button to check the runtime environment:</p>
<button onclick="checkBrowser()">Check Runtime Environment</button>
<p id="result"></p>
<script>
function checkBrowser() {
if (typeof window === "object") {
document.getElementById("result").innerHTML = "Runtime environment is Browser";
} else {
document.getElementById("result").innerHTML = "Runtime environment is NOT Browser";
}
}
</script>
</body>
</html>
Detecting Multiple Runtime Environments
You can create a more comprehensive detection system that identifies different runtime environments:
-
Browser:
typeof window === "object" -
Node.js:
typeof process === "object" && typeof require === "function" -
Service Worker:
typeof importScripts === "function"
Example: Comprehensive Environment Detection
<!DOCTYPE html>
<html>
<body>
<h2>Detect Current Runtime Environment</h2>
<p>Click the button to identify the runtime environment:</p>
<button onclick="detectEnvironment()">Detect Environment</button>
<script>
function detectEnvironment() {
let environment = "Unknown";
// Check for Node.js
if (typeof process === "object" && typeof require === "function") {
environment = "Node.js";
}
// Check for Service Worker
else if (typeof importScripts === "function") {
environment = "Service Worker";
}
// Check for Browser
else if (typeof window === "object") {
environment = "Browser";
}
document.getElementById("results").innerHTML =
"<p><strong>Runtime Environment:</strong> " + environment + "</p>";
}
</script>
</body>
</html>
Practical Use Cases
Environment detection is useful for:
- Loading different polyfills based on the environment
- Using environment-specific APIs (DOM in browsers, file system in Node.js)
- Conditional module loading
- Error handling that varies by environment
Comparison Table
| Environment | Detection Method | Global Objects |
|---|---|---|
| Browser | typeof window === "object" |
window, document, alert |
| Node.js | typeof process === "object" |
process, require, global |
| Service Worker | typeof importScripts === "function" |
importScripts, self |
Notes
The typeof operator returns the data type of a variable, function, or object as a string. It's safe to use with potentially undefined global objects because it won't throw an error if the object doesn't exist.
Conclusion
Detecting the runtime environment allows you to write environment-aware code that adapts to different JavaScript contexts. Use typeof window === "object" as the primary method to detect browser environments.
3K+ Views
