浏览器对象

Mr.Hope2019年10月16日
大约 5 分钟

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

window

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

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

兼容性

IE <= 8 不支持。

"use strict";

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

对应的,还有一个 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}`);

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

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

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

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

screen

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

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

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

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'

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

"use strict";

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

document

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

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

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

要查找 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>

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);
摩卡
热摩卡咖啡
酸奶
北京老酸奶
果汁
鲜榨苹果汁

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'

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

<!-- 当前页面在 www.example.com -->
<html>
  <head>
    <script src="https://www.foo.com/jquery.js"></script>
  </head>
  ...
</html>

如果引入的第三方的 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(),试图回到登录前的页面。这是一种错误的方法。

评论
Powered by Waline v2.6.2