JavaScript浏览器对象与函数

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

window

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

Window {window: Window, self: Window, document: document, name: '', location: Location, …}

• window.innerWidth  指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽。
• window.innerHeight 指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净高。
• window.outerWidth   浏览器窗口的整个宽
• window.outerHeight  浏览器窗口的整个高

navigator

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

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

请注意，navigator 的信息可以很容易地被用户修改，所以 JavaScript 读取的值不一定是正确的。很多初学者为了针对不同浏览器编写不同的代码，喜欢用if判断浏览器版本，正确的方法是充分利用 JavaScript 对不存在属性返回 undefined 的特性，直接用短路运算符 || 计算

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

screen

screen 对象表示屏幕的信息，常用的属性有：

• screen.width：屏幕宽度，以像素为单位；
• screen.height：屏幕高度，以像素为单位；
• screen.colorDepth：返回颜色位数，如8、16、24

location

location 对象表示当前页面的 URL 信息。

location.href       // http://www.example.com:8080/path/index.html?a=1&b=2#TOP
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()   // 重新加载当前页面

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

setTimeout

等待多久以后执行传入的函数。

// 等待 3 秒以后打印日志
setTimeout("console.log('done!')", 3000);

// 等待 3 秒以后弹出打印
setTimeout("alert('对不起, 要你久候')", 3000 );

// 等待 3 秒以后执行自定义函数
setTimeout(()=>console.log("done!"), 3000);