浏览器脚本之Console、History、Location、Navigator、Screen

263 阅读7分钟

console

Console 对象提供对浏览器调试控制台的访问。

Console 对象是 window 对象的属性。

Console 对象通过以下方式访问:

window.console 或仅用 console

Console 对象方法

方法描述
assert()如果 assertion 为 false,则将错误消息写入控制台。
clear()清空控制台。
count()记录这个对 count() 的特定调用已被调用的次数。
error()将错误消息输出到控制台。
group()在控制台中创建新的分组。
groupCollapsed()在控制台中创建新的行内组。但是新组是折叠创建的。用户需要使用按钮将其展开。
groupEnd()退出控制台中的当前分组。
info()将信息性消息输出到控制台。
log()将消息输出到控制台。
table()将表格式的数据显示为表。
time()启动计时器(可跟踪操作需要多长时间)。
timeEnd()停止以前由 console.time() 启动的计时器。
trace()将堆栈跟踪输出到控制台。
warn()将警告消息输出到控制台。

Window History 对象

History 对象包含用户(在浏览器窗口中)访问过的 URL。

History 对象是 window 对象的属性。

History 对象通过以下方式访问:

window.history 或仅用 history

History 对象属性和方法

属性/方法描述
back()加载历史列表中的上一个 URL(页面)。
forward()加载历史列表中的下一个 URL(页面)。
go()从历史列表中加载特定的 URL(页面)。
length返回历史列表中的 URL(页面)数量。

History 对象描述

History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因,History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()forward() 和 go() 方法。

例子

下面一行代码执行的操作与单击后退按钮执行的操作一样:

history.back()

下面一行代码执行的操作与单击两次后退按钮执行的操作一样:

history.go(-2)

Window Location 对象

Location 对象包含有关当前 URL 的信息。

Location 对象是窗口对象的属性。

Location 对象通过以下方式访问:

window.location 或仅用 location

let origin = window.location.origin;
let origin = location.origin;

Location 对象属性

属性描述
hash设置或返回 URL 的锚部分 (#)。
host设置或返回 URL 的主机名和端口号。
hostname设置或返回 URL 的主机名。
href设置或返回整个 URL。
origin返回 URL 的协议、主机名和端口号。
pathname设置或返回 URL 的路径名。
port设置或返回 URL 的端口号。
protocol设置或返回 URL 的协议。
search设置或返回 URL 的查询字符串部分。

例子

image.png

Location 对象方法

方法描述
assign()加载新文档。
reload()重新加载当前文档。
replace()用新文档替换当前文档。

例子

document.location.assign('https://developer.mozilla.org/zh-CN/docs/Web/API/Location/reload');

location.reload()  方法用来刷新当前页面,就像刷新按钮一样。 该方法在跨域调用(执行该方法的脚本文件的域和 Location 对象所在页面的域不同)时,将会抛出 SECURITY_ERROR DOMException 异常。有关更多信息,请参阅浏览器的同源策略

Location.replace()  方法以给定的 URL 来替换当前的资源。与 assign() 方法 不同的是,调用 replace() 方法后,当前页面不会保存到会话历史中(session History),这样,用户点击回退按钮时,将不会再跳转到该页面。

因违反安全规则导致的赋值失败,浏览器将会抛出类型为 SECURITY_ERROR 的 DOMException 异常。当调用该方法的脚本所属的源与拥有 Location 对象所属源不同时,通常情况会发生这种异常,此时通常该脚本是存在不同的域下。

如果 URL 无效,浏览器也会抛出 SYNTAX_ERROR 类型的 DOMException 异常。

Location 对象描述

Location 对象存储在 Window 对象的 Location 属性中,表示那个窗口中当前显示的文档的 Web 地址。它的 href 属性存放的是文档的完整 URL,其他属性则分别描述了 URL 的各个部分。这些属性与 Anchor 对象(或 Area 对象)的 URL 属性非常相似。当一个 Location 对象被转换成字符串,href 属性的值被返回。这意味着你可以使用表达式 location 来替代 location.href。

不过 Anchor 对象表示的是文档中的超链接,Location 对象表示的却是浏览器当前显示的文档的 URL(或位置)。但是 Location 对象所能做的远远不止这些,它还能控制浏览器显示的文档的位置。如果把一个含有 URL 的字符串赋予 Location 对象或它的 href 属性,浏览器就会把新的 URL 所指的文档装载进来,并显示出来。

除了设置 location 或 location.href 用完整的 URL 替换当前的 URL 之外,还可以修改部分 URL,只需要给 Location 对象的其他属性赋值即可。这样做就会创建新的 URL,其中的一部分与原来的 URL 不同,浏览器会将它装载并显示出来。例如,假设设置了Location对象的 hash 属性,那么浏览器就会转移到当前文档中的一个指定的位置。同样,如果设置了 search 属性,那么浏览器就会重新装载附加了新的查询字符串的 URL。

除了 URL 属性外,Location 对象的 reload() 方法可以重新装载当前文档,replace() 可以装载一个新文档而无须为它创建一个新的历史记录,也就是说,在浏览器的历史列表中,新文档将替换当前文档。

Window Navigator 对象

Navigator 对象包含有关浏览器的信息。

Navigator 对象是窗口对象的属性。

Navigator 对象通过以下方式访问:

window.navigator 或仅用 navigator

Navigator 对象属性

属性描述
appCodeName返回浏览器代码名称。
appName返回浏览器名称。
appVersion返回浏览器版本。
cookieEnabled如果启用了浏览器 cookie,则返回 true。
geolocation返回用户位置的 geolocation 对象。
language返回浏览器语言。
onLine如果浏览器在线,则返回 true。
platform返回浏览器平台。
product返回浏览器引擎名称。
userAgent返回浏览器用户代理标头。

Navigator 对象方法

方法描述
javaEnabled()如果浏览器启用了 Java,则返回 true。
taintEnabled()在 JavaScript 版本 1.2 (1999) 中删除。

其他相关属性

属性描述
appMinorVersion返回浏览器的次级版本。
browserLanguage返回当前浏览器的语言。
cpuClass返回浏览器系统的 CPU 等级。
systemLanguage返回 OS 使用的默认语言。
userLanguage返回 OS 的自然语言设置。

例子

image.png

Navigator 对象描述

Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。

虽然这个对象的名称显而易见的是 Netscape 的 Navigator 浏览器,但其他实现了 JavaScript 的浏览器也支持这个对象。

Navigator 对象的实例是唯一的,可以用 Window 对象的 navigator 属性来引用它。

Window Screen 对象

屏幕对象包含有关访问者屏幕的信息。

Screen 对象属性

属性描述
availHeight返回屏幕高度(不包括 Windows 任务栏)。
availWidth返回屏幕宽度(不包括 Windows 任务栏)。
colorDepth返回用于显示图像的调色板的位深度。
height返回屏幕的总高度。
pixelDepth返回屏幕的颜色分辨率(每像素位数)。
width返回屏幕的总宽度。

Screen 对象描述

每个 Window 对象的 screen 属性都引用一个 Screen 对象。Screen 对象中存放着有关显示浏览器屏幕的信息。JavaScript 程序将利用这些信息来优化它们的输出,以达到用户的显示要求。例如,一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像,它还可以根据显示器的颜色深度选择使用 16 位色还是使用 8 位色的图形。另外,JavaScript 程序还能根据有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。

其他相关属性

属性描述
bufferDepth设置或返回调色板的比特深度。
deviceXDPI返回显示屏幕的每英寸水平点数。
deviceYDPI返回显示屏幕的每英寸垂直点数。
fontSmoothingEnabled返回用户是否在显示控制面板中启用了字体平滑。
logicalXDPI返回显示屏幕每英寸的水平方向的常规点数。
logicalYDPI返回显示屏幕每英寸的垂直方向的常规点数。
updateInterval设置或返回屏幕的刷新率。

例子

image.png