JavaScript Window Navigator
在本教程中,您将了解 JavaScript 窗口导航器对象。
导航器对象
窗口的 navigator 属性(即 window.navigator
)是对 Navigator 对象的引用; 它是一个只读属性,包含有关用户浏览器的信息。
由于 Window 是一个全局对象,并且位于作用域链的顶端,所以 Window 对象的属性如 window.navigator
可以不带 window.
前缀访问,例如 window.navigator.language
可以写成 navigator.language
.
以下部分将向您展示如何获取有关用户浏览器的各种信息。
检测浏览器是在线还是离线
您可以使用 navigator.onLine
属性来检测浏览器(或应用程序)是在线还是离线。 该属性返回一个布尔值true
表示在线,或false
表示离线。
<script>
function checkConnectionStatus() {
if(navigator.onLine) {
alert("Application is online.");
} else {
alert("Application is offline.");
}
}
</script>
<button type="button" onclick="checkConnectionStatus();">Check Connection Status</button>
当连接建立或丢失时,浏览器会触发在线和离线事件。 您可以将处理程序函数附加到这些事件,以便针对在线和离线场景自定义您的应用程序。
让我们看一下下面的 JavaScript 代码,看看它是如何工作的:
<script>
function goOnline() {
// 当您的应用程序上线时要执行的操作
alert("And we're back!");
}
function goOffline() {
// 当您的应用程序脱机时要执行的操作
alert("Hey, it looks like you're offline.");
}
// 为在线事件附加事件处理程序
window.addEventListener("online", goOnline);
// 为离线事件附加事件处理程序
window.addEventListener("offline", goOffline);
</script>
<p>Toggle your internet connection on/off to see how it works.</p>
上例中的 goOffline()
函数会在连接离线时被浏览器自动调用,而 goOnline()
函数会在连接断开时被浏览器自动调用 连接状态变为在线。
检查 Cookie 是否启用
您可以使用 navigator.cookieEnabled
来检查用户浏览器中是否启用了 cookies。 如果启用了 cookie,则此属性返回布尔值 true
,如果未启用,则返回 false
。
<script>
function checkCookieEnabled() {
if(navigator.cookieEnabled) {
alert("Cookies are enabled in your browser.");
} else {
alert("Cookies are disabled in your browser.");
}
}
</script>
<button type="button" onclick="checkCookieEnabled();">Check If Cookies are Enabled</button>
提示:您应该使用 navigator.cookieEnabled
属性来确定是否在 JavaScript 代码中创建或使用 cookies 之前启用 cookie。
检测浏览器语言
您可以使用 navigator.language
属性来检测浏览器 UI 的语言。
此属性返回一个表示语言的字符串,例如 "en"、"en-US"等
<script>
function checkLanguage() {
alert("Your browser's UI language is: " + navigator.language);
}
</script>
<button type="button" onclick="checkLanguage();">Check Language</button>
获取浏览器名称和版本信息
Navigator 对象有五个主要属性,提供有关用户浏览器的名称和版本信息。 以下列表简要概述了这些属性:
appName
— 返回浏览器的名称。 在任何浏览器中,它总是返回"Netscape"。appVersion
— 返回浏览器的版本号和其他信息。appCodeName
— 返回浏览器的代码名称。 它为所有浏览器返回"Mozilla"。userAgent
— 返回当前浏览器的用户代理字符串。 此属性通常包含appName
和appVersion
中的所有信息。platform
— 返回运行浏览器的平台(例如"Win32"、"WebTV OS"等)
从上面的描述可以看出,这些属性返回的值具有误导性和不可靠,所以不要用它们来判断用户的浏览器类型和版本。
<script>
function getBrowserInformation() {
var info = "\n App Name: " + navigator.appName;
info += "\n App Version: " + navigator.appVersion;
info += "\n App Code Name: " + navigator.appCodeName;
info += "\n User Agent: " + navigator.userAgent;
info += "\n Platform: " + navigator.platform;
alert("Here're the information related to your browser: " + info);
}
</script>
<button type="button" onclick="getBrowserInformation();">Get Browser Information</button>
检查浏览器是否启用了 Java
您 可以 使用 方法 javaEnabled()
来检查当前浏览器是否支持 Java。
此方法仅指示控制 Java 的首选项是打开还是关闭,它不显示浏览器是否提供 Java 支持或 Java 是否安装在用户的系统上。
<script>
function checkJavaEnabled() {
if(navigator.javaEnabled()) {
alert("Your browser is Java enabled.");
} else {
alert("Your browser is not Java enabled.");
}
}
</script>
<button type="button" onclick="checkJavaEnabled();">Check If Java is Enabled</button>