浏览器对象

Mr.Hope ... 2019-10-16 JavaScript 大约 5 分钟

JavaScript 可以获取浏览器提供的很多对象,并进行操作。

# window

window 对象不但充当全局作用域,而且表示浏览器窗口。

window 对象有 innerWidthinnerHeight 属性,可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后,用于显示网页的净宽高。

兼容性

IE <= 8 不支持。

"use strict";

// 可以调整浏览器窗口大小试试:
console.log(`window inner size: ${window.innerWidth} x ${window.innerHeight}`);
1
2
3
4

对应的,还有一个 outerWidthouterHeight 属性,可以获取浏览器窗口的整个宽高。

navigator 对象表示浏览器的信息,最常用的属性包括:

  • navigator.appName: 浏览器名称;
  • navigator.appVersion: 浏览器版本;
  • navigator.language: 浏览器设置的语言;
  • navigator.platform: 操作系统类型;
  • navigator.userAgent: 浏览器设定的 User-Agent 字符串。
"use strict";

console.log(`appName = ${navigator.appName}`);
console.log(`appVersion = ${navigator.appVersion}`);
console.log(`language = ${navigator.language}`);
console.log(`platform = ${navigator.platform}`);
console.log(`userAgent = ${navigator.userAgent}`);
1
2
3
4
5
6
7

请注意,navigator 的信息可以很容易地被用户修改,所以 JavaScript 读取的值不一定是正确的。很多初学者为了针对不同浏览器编写不同的代码,喜欢用if判断浏览器版本,例如:

let width;
if (getIEVersion(navigator.userAgent) < 9) width = document.body.clientWidth;
else width = window.innerWidth;
1
2
3

但这样既可能判断不准确,也很难维护代码。正确的方法是充分利用 JavaScript 对不存在属性返回 undefined 的特性,直接用短路运算符 || 计算:

const width = window.innerWidth || document.body.clientWidth;
1

# screen

screen 对象表示屏幕的信息,常用的属性有:

  • screen.width: 屏幕宽度,以像素为单位;
  • screen.height: 屏幕高度,以像素为单位;
  • screen.colorDepth: 返回颜色位数,如 8、16、24。
"use strict";

console.log(`Screen size = ${screen.width} x ${screen.height}`);
1
2
3

# location

location 对象表示当前页面的 URL 信息。例如,一个完整的 URL:

https://www.example.com:8080/path/index.html?a=1&b=2#TOP 可以用 location.href 获取。要获得 URL 各个部分的值,可以这么写:

location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'
1
2
3
4
5
6

要加载一个新页面,可以调用 location.assign()。如果要重新加载当前页面,调用 location.reload() 方法非常方便。

"use strict";

if (confirm("重新加载当前页" + location.href + "?")) location.reload();
else location.assign("/"); // 设置一个新的 URL 地址
1
2
3
4

# document

document 对象表示当前页面。由于 HTML 在浏览器中以 DOM 形式表示为树形结构,document 对象就是整个 DOM 树的根节点。

document 的 title 属性是从 HTML 文档中的 <title>xxx</title> 读取的,但是可以动态改变:

"use strict";
document.title = "努力学习JavaScript!";
1
2

要查找 DOM 树的某个节点,需要从 document 对象开始查找。最常用的查找是根据 ID 和 Tag Name。

我们先准备 HTML 数据:

<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
  <dt>摩卡</dt>
  <dd>热摩卡咖啡</dd>
  <dt>酸奶</dt>
  <dd>北京老酸奶</dd>
  <dt>果汁</dt>
  <dd>鲜榨苹果汁</dd>
</dl>
1
2
3
4
5
6
7
8

document 对象提供的 getElementById()getElementsByTagName() 可以按 ID 获得一个 DOM 节点和按 Tag 名称获得一组 DOM 节点:

"use strict";

let menu = document.getElementById("drink-menu");
let drinks = document.getElementsByTagName("dt");
let s, menu, drinks;

menu = document.getElementById("drink-menu");
menu.tagName; // 'DL'

drinks = document.getElementsByTagName("dt");
s = "提供的饮料有:";
for (let i = 0; i < drinks.length; i++) s = s + drinks[i].innerHTML + ",";

console.log(s);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
摩卡
热摩卡咖啡
酸奶
北京老酸奶
果汁
鲜榨苹果汁

document 对象还有一个 cookie 属性,可以获取当前页面的 Cookie。

Cookie 是由服务器发送的 key-value 标示符。因为 HTTP 协议是无状态的,但是服务器要区分到底是哪个用户发过来的请求,就可以用 Cookie 来区分。当一个用户成功登录后,服务器发送一个 Cookie 给浏览器,例如 user=ABC123XYZ (加密的字符串)...,此后,浏览器访问该网站时,会在请求头附上这个 Cookie,服务器根据 Cookie 即可区分出用户。

Cookie 还可以存储网站的一些设置,例如,页面显示的语言等等。

JavaScript 可以通过 document.cookie 读取到当前页面的 Cookie:

document.cookie; // 'v=123; remember=true; prefer=zh'
1

由于 JavaScript 能读取到页面的 Cookie,而用户的登录信息通常也存在 Cookie 中,这就造成了巨大的安全隐患,这是因为在 HTML 页面中引入第三方的 JavaScript 代码是允许的:

<!-- 当前页面在 www.example.com -->
<html>
  <head>
    <script src="https://www.foo.com/jquery.js"></script>
  </head>
  ...
</html>
1
2
3
4
5
6
7

如果引入的第三方的 JavaScript 中存在恶意代码,则 www.foo.com 网站将直接获取到 www.example.com 网站的用户登录信息。

为了解决这个问题,服务器在设置 Cookie 时可以使用 httpOnly,设定了 httpOnly 的 Cookie 将不能被 JavaScript 读取。这个行为由浏览器实现,主流浏览器均支持 httpOnly 选项,IE 从 IE6 SP1 开始支持。

为了确保安全,服务器端在设置 Cookie 时,应该始终坚持使用 httpOnly

# history

history 对象保存了浏览器的历史记录,JavaScript 可以调用 history 对象的 back()forward (),相当于用户点击了浏览器的“后退”或“前进”按钮。

这个对象属于历史遗留对象,对于现代 Web 页面来说,由于大量使用 AJAX 和页面交互,简单粗暴地调用 history.back() 可能会让用户感到非常愤怒。

新手开始设计 Web 页面时喜欢在登录页登录成功时调用 history.back(),试图回到登录前的页面。这是一种错误的方法。