Navigator-对象Screen-对象

39次阅读

共计 2833 个字符,预计需要花费 8 分钟才能阅读完成。

Navigator 对象,Screen 对象

window.navigator 属性指向一个包含浏览器和系统信息的 Navigator 对象。脚本通过这个属性了解用户的环境信息。

1.Navigator 对象的属性

1.1.Navigator.userAgent

1.2.Navigator.plugins

1.3.Navigator.platform

1.4Navigator.onLine

1.5Navigator.language,#1.6Navigator.languages

1.7Navigator.geolocation

1.8Navigator.cookieEnabled

2Navigator 对象的方法

2.1Navigator.javaEnabled()

2.2Navigator.sendBeacon()

3Screen 对象

1.Navigator 对象的属性

1.1.Navigator.userAgent

navigator.userAgent 属性返回浏览器的 User Agent 字符串,表示浏览器的厂商和版本信息。

下面是 Chrome 浏览器的 userAgent。

navigator.userAgent
// “Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36”

通过 userAgent 可以大致准确地识别手机浏览器,方法就是测试是否包含 mobi 字符串。

var ua = navigator.userAgent.toLowerCase();

if (/mobi/i.test(ua)) {
// 手机浏览器
} else {
// 非手机浏览器
}
如果想要识别所有移动设备的浏览器,可以测试更多的特征字符串。

/mobi|android|touch|mini/i.test(ua)

1.2.Navigator.plugins

返回一个类似数组的对象,成员是 Plugin 实例对象,表示浏览器安装的插件

1.3.Navigator.platform

Navigator.platform 属性返回用户的操作系统信息,比如 MacIntel、Win32、Linux x86_64 等。

navigator.platform
// “Linux x86_64”

1.4Navigator.onLine

是否在线,有无网络,返回真用户变成在线会触发

online 事件,变成离线会触发 offline 事件,可以通过 window.ononline 和 window.onoffline 指定这两个事件的回调函数。

window.addEventListener(‘offline’, function(e) {console.log(‘offline’); });
window.addEventListener(‘online’, function(e) {console.log(‘online’); }); 假

1.5Navigator.language,Navigator.languages

Navigator.language 属性返回一个字符串,表示浏览器的首选语言。该属性只读。

navigator.language // “en”
Navigator.languages 属性返回一个数组,表示用户可以接受的语言。

如果这个属性发生变化,就会在 window 对象上触发 languagechange 事件

1.7Navigator.geolocation

Navigator.geolocation 属性返回一个 Geolocation 对象,包含用户地理位置的信息

Geolocation 对象提供下面三个方法。

Geolocation.getCurrentPosition():得到用户的当前位置
Geolocation.watchPosition():监听用户位置变化
Geolocation.clearWatch():取消 watchPosition() 方法指定的监听函数
注意,调用这三个方法时,浏览器会跳出一个对话框,要求用户给予授权

1.8Navigator.cookieEnabled

Navigator.cookieEnabled 属性返回一个布尔值,表示浏览器的 Cookie 功能是否打开。

navigator.cookieEnabled // true
注意,这个属性反映的是浏览器总的特性,与是否储存某个具体的网站的 Cookie 无关。用户可以设置某个网站不得储存 Cookie,这时 cookieEnabled 返回的还是 true。

2Navigator 对象的方法

2.1Navigator.javaEnabled()

Navigator.javaEnabled()方法返回一个布尔值,表示浏览器是否能运行 Java Applet 小程序。

navigator.javaEnabled() // false

2.2Navigator.sendBeacon()

Navigator.sendBeacon()方法用于向服务器异步发送数据

3Screen 对象

Screen 对象表示当前窗口所在的屏幕,提供显示设备的信息。window.screen 属性指向这个对象。

该对象有下面的属性。

Screen.height:浏览器窗口所在的屏幕的高度(单位像素)。除非调整显示器的分辨率,否则这个值可以看作常量,不会发生变化。显示器的分辨率与浏览器设置无关,缩放网页并不会改变分辨率。
Screen.width:浏览器窗口所在的屏幕的宽度(单位像素)。
Screen.availHeight:浏览器窗口可用的屏幕高度(单位像素)。因为部分空间可能不可用,比如系统的任务栏或者 Mac 系统屏幕底部的 Dock 区,这个属性等于 height 减去那些被系统组件的高度。
Screen.availWidth:浏览器窗口可用的屏幕宽度(单位像素)。
Screen.pixelDepth:整数,表示屏幕的色彩位数,比如 24 表示屏幕提供 24 位色彩。
Screen.colorDepth:Screen.pixelDepth 的别名。严格地说,colorDepth 表示应用程序的颜色深度,pixelDepth 表示屏幕的颜色深度,绝大多数情况下,它们都是同一件事。
Screen.orientation:返回一个对象,表示屏幕的方向。该对象的 type 属性是一个字符串,表示屏幕的具体方向,landscape-primary 表示横放,landscape-secondary 表示颠倒的横放,portrait-primary 表示竖放,portrait-secondary

下面是根据屏幕的宽度,将用户导向不同网页的代码。

if ((screen.width <= 800) && (screen.height <= 600)) {
window.location.replace(‘small.html’);
} else {
window.location.replace(‘wide.html’);
}

正文完
 0