JAVASCRIPT 基础教程
JAVASCRIPT & DOM
JAVASCRIPT & BOM
JAVASCRIPT 高级教程
JAVASCRIPT 示例
JAVASCRIPT 参考

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 — 返回当前浏览器的用户代理字符串。 此属性通常包含 appNameappVersion 中的所有信息。
  • 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>
Advertisements