- Home
- /
- Tutorials
- /
- JavaScript Tutorial
- /
- JavaScript navigator Object
JavaScript Storage & BOM
JavaScript navigator Object
navigatordescribes the browser and device running the page.
It is mostly used to check what the browser can do, not what it is.
Checking for a feature directly is more reliable than checking the browser's name.
Example
Example
javascript
console.log(typeof navigator.onLine);
console.log(typeof navigator.language);The output is boolean then string.
Useful Properties
onLine - whether the browser believes it has a connection.
language - the browser's preferred language.
clipboard and geolocation - access to device features.
Syntax
Syntax
javascript
navigator.onLine;
navigator.language;Most navigator features need permission from the visitor.
Checking the Connection
Useful for showing an offline message.
Example
Example
javascript
console.log(typeof navigator.onLine);
window.addEventListener("online", function () {
console.log("back online");
});
window.addEventListener("offline", function () {
console.log("lost the connection");
});The events fire when the connection genuinely changes.
Reading the Language
This is how a site can offer content in the visitor's language.
Example
Example
javascript
console.log(navigator.language);
console.log(Array.isArray(navigator.languages));languages lists every preference in order.
Feature Detection, Not Browser Detection
Check for the feature itself rather than reading the browser name.
Browser names change and can be spoofed; feature checks cannot.
Example
Example
javascript
function supportsClipboard() {
return typeof navigator.clipboard !== "undefined";
}
console.log(supportsClipboard());This works correctly regardless of which browser it is.
Copying to the Clipboard
navigator.clipboard.writeText returns a promise.
Example
Example
javascript
console.log(typeof navigator.clipboard.writeText);Calling it usually needs the action to come from a genuine user click.
Avoid userAgent Sniffing
Parsing the user agent string to detect the browser is fragile and discouraged.
Feature checks age far better as browsers change.
Example
Example
javascript
console.log(typeof navigator.userAgent);It still exists, mostly for logging, not for making decisions.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript navigator Object</title>
</head>
<body>
<h1>The navigator Object</h1>
<p id="out"></p>
<script>
const out = document.getElementById("out");
out.innerHTML =
"Online: " + navigator.onLine +
"<br>Language: " + navigator.language +
"<br>Clipboard supported: " + (typeof navigator.clipboard !== "undefined");
window.addEventListener("offline", function () {
out.textContent = "You are offline";
});
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try feature checking:
Check typeof navigator.geolocation as well.
Important Points
navigator.onLinereports the connection state.navigator.languagegives the preferred language.- Prefer checking for a feature over checking the browser name.
navigator.clipboardgives clipboard access, with permission.userAgentsniffing is fragile and best avoided.
Conclusion
navigator describes the environment the page is running in.
The properties are mostly there to help the page adapt sensibly.
Feature detection is the reliable way to use any of it.
