最近看了点非侵入式JavaScript,发现里面很多地方有提到浏览器检测和对象检测。当然实际开发中我们应该使用后者。浏览器检测实际上是基于一些浏览器对象的,这些对象是浏览器供应商为我们提供的,很多属性并不是标准,因此有些属性在各个浏览器中并不统一,且其值也不准确。因此使用时应该要格外小心。
navigator 对象包含有关浏览器的信息。不过值得注意的是,到现在还没有应用于 navigator 对象的公开标准,不过所有浏览器都支持该对象的。所以我们可以简单的利用收集浏览器客户、端信息。在浏览器控制台输出如下
只有一个属性 length,指示浏览器历史列表中的 URL 数量。
从上面描述可知,这些属性都是可修改的。而且修改的时候可以触发下面一些方法。
当我们改变 location 信息时,就会触发reload()。我们可以利用这点在为当前页面加载新的文档。
总的来看浏览器对象有四个,分别是 navigator、screen、history 和 location,而且它们都是 window 对象的属性。因为很多浏览器的支持标准不一样,这里我使用的是Chrome,版本60.0.3112.113(正式版本) (64 位)。
navigator
navigator 对象包含有关浏览器的信息。不过值得注意的是,到现在还没有应用于 navigator 对象的公开标准,不过所有浏览器都支持该对象的。所以我们可以简单的利用收集浏览器客户、端信息。在浏览器控制台输出如下
常见属性如下:
属性 | 描述 |
appCodeName | 返回浏览器的内部“开发代号”名称。 值不一定正确 |
appName | 返回浏览器官方名称。值不一定正确。 |
appVersion | 返回浏览器的平台和版本信息。值不一定正确。 |
language | 返回当前浏览器的语言。(languages)。有可能为 null |
cookieEnabled | 返回指明浏览器中是否启用 cookie 。 |
onLine | 返回指明系统是否处于联机状态。网络查看的。 |
platform | 返回运行浏览器的操作系统平台。 |
userAgent | 返回由客户机发送服务器的 user-agent 头部的值。即浏览器类别、版本,客户端操作系统等信息。有些JS 库会根据这个值判断浏览器。尽量别这么干。 |
screen
从名字上看,可以知道它是有关客户端显示屏幕的信息。有时候为了适应各种设备,并提供更好的用户体验,可能会考虑这个信息。
属性 | 描述 |
availHeight | 显示屏幕的高度 (去掉 Windows 任务栏之后的高度)。 |
availWidth | 显示屏幕的宽度 (去掉 Windows 任务栏之后的高度)。 |
bufferDepth | 设置或返回调色板的比特深度。 |
availLeft | |
availTop | |
height | 显示器屏幕的宽度(含任务栏高度)。 |
colorDepth | 返回目标设备或缓冲器上的调色板的比特深度。 |
orientation | 屏幕显示方向。我们也可以监听其 onchange 事件。 |
width | 显示器屏幕的宽度 |
总的来说,Screen 对象中存放着有关显示浏览器屏幕的信息。JavaScript 程序将利用这些信息来优化它们的输出。
history
这个估计很多人熟悉了,该对象包含用户(在浏览器窗口中)访问过的 URL只有一个属性 length,指示浏览器历史列表中的 URL 数量。
方法 | 描述 |
back() | 加载 history 列表中的前一个 URL。 |
forward() | 加载 history 列表中的下一个 URL。 |
go() | 加载 history 列表中的某个具体页面。 |
几乎所有浏览器都自带前进后退功能,因此很多时候这个对象几乎没啥用处。
location
对很多人来说,这个对象估计是最陌生的了。从名字上看是 位置的意思。其实它是指示当前 URL 信息的。
属性 | 描述 |
hash | 设置或返回从井号 (#) 开始的 URL(锚)。 |
host | 设置或返回主机名和当前 URL 的端口号。 |
hostname | 设置或返回当前 URL 的主机名,不含端口 |
href | 设置或返回完整的 URL。 |
pathname | 设置或返回当前 URL 的路径名 |
port | 设置或返回当前 URL 的端口号。 |
protocol | 设置或返回当前 URL 的协议。 |
search | 设置或返回从问号 (?) 开始的 URL(查询部分)。 |
origin | 默认跟window.origin 是同值。其值一般是首页的 URL。 |
方法 | 描述 |
assign( | 加载新的文档。 |
reload() | 重新加载当前文档。 |
replace() | 用新的文档替换当前文档。 |