JavaScript快速入门笔记（9）：window对象

本系列随笔是本人的学习笔记，初学阶段难免会有理解不当之处，错误之处恳请指正。转载请注明出处：https://www.cnblogs.com/itwhite/p/12244592.html。

location 属性：标识当前文档的URL信息

location 属性用于标识当前页面的 URL 信息。

location 属性值是一个 Location 对象，其中包含 href、hostname、port、protocol 等属性以及 reload()、assign() 等方法，示例（假设当前页面地址为：http://a.b.c.d:8000/?q=test&action=query）：

origin: "http://a.b.c.d:8000"
protocol: "http:"
host: "a.b.c.d:8001"
hostname: "a.b.c.d"
port: "8001"
pathname: "/"
search: "?action=query&string=test"    // 查询参数，问号及后面的内容
hash: ""
href: "http://a.b.c.d:8000/?action=query&string=test"
assign: ƒ assign()    // 可以用于重定向页面，与赋值给 window.location 效果类似
reload: ƒ reload()
replace: ƒ replace()  // 类似与 assign()，区别在于 assign() 操作后，当前页面会保留在历史记录中，而 replace() 则会从历史记录中删除当前页面

关于 Location 对象的属性和方法的更多描述，请参考：https://www.w3.org/TR/html52/browsers.html#the-location-interface。

通过修改 location 对象的值，可以实现页面重定向，例如：

window.location = "https://www.baidu.com/";          // 跳转到百度首页
// 或者
window.location.href = "https://www.baidu.com/";     // 跳转到百度首页，与上面的代码效果一样

document 对象也包含一个 location 属性，它与 window 对象的 location 指向同一个对象，例如：

console.log(window.location === document.location); // true

document 属性：标识文档结构

document 属性值是 HTMLDocument 的一个实例，表示整个 HTML 文档，它是 DOM 节点树的根节点，通过它可以操控整个 DOM 结构。

它相关的属性和方法请参看本人另一篇笔记：https://www.cnblogs.com/itwhite/p/12248730.html 中关于 document 对象的描述部分，此不赘述。

history 属性：浏览历史记录

history 属性用于访问当前窗口的浏览历史记录，通过它可以实现类似于浏览器中的“前进”、“后退”按钮的功能，但不能直接访问历史记录中的URL信息（这是出于保护用户隐私的原因）。

history 引用的是 History 对象，其中包含一个 length 属性（用于记录历史记录数目）和 back()、forward()、go() 等函数。

更多关于 History 对象的描述请参考：https://www.w3.org/TR/html52/browsers.html#the-history-interface。

navigator 属性： 浏览器厂商和版本信息

navigator 属性用于访问浏览器厂商和版本信息，它引用的是 Navigator 对象，示例（Chrome浏览器）：

vendorSub: ""
productSub: "20030107"
vendor: "Google Inc."
maxTouchPoints: 0
hardwareConcurrency: 4
cookieEnabled: true
appCodeName: "Mozilla"
appName: "Netscape"  // 本用于描述浏览器名称，但由于历史原因必须为“Netscape”，才能让一些现有网站正确显示
appVersion: "5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36"
platform: "Win32"
product: "Gecko"
userAgent: "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36" // 浏览器探测通常使用这个属性
language: "zh-CN"
languages: (3) ["zh-CN", "zh", "en"]
onLine: true
...

screen 属性：设备屏幕尺寸和像素信息

screen 属性用于访问客户端设备屏幕尺寸和像素等相关信息（注意是设备屏幕尺寸，而不是浏览器窗口尺寸），它引用 Screen 对象，示例：

availWidth: 1920
availHeight: 1040 // availWidth 和 availHeight 表示窗口实际可用尺寸（排除了桌面任务栏等占用的空间）
 1920
height: 1080      // width 和 height 表示屏幕窗口尺寸
colorDepth: 24
pixelDepth: 24
availLeft: 0
availTop: 0
orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
__proto__: Screen
    availWidth: (...)
    availHeight: (...)
     (...)
    height: (...)
    colorDepth: (...)
    pixelDepth: (...)
    availLeft: (...)
    availTop: (...)
    orientation: (...)
...

对话框方法：alert()、confirm()、prompt()

alert()用于显示警告对话框，confirm()用于确认（返回true或false），prompt()用于接收用户输入（返回用户输入内容），示例：

var email = prompt("Please enter your email: ");
var correct = confirm("Please confirm the email " + email + " is correct.");
if (correct) {
    console.log("The email is correct");
}
else {
    alert("The email is incorrect");
}

另外，window 对象中还有一个对话框方法 showModalDialog() 已被废弃，详见：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/showModalDialog。

定时器方法：setTimeout()、setInterval()

setTimeout()用于设置延时执行，setInterval()用于设置定时间隔执行（每间隔一段时间重复执行，直到使用 clearInterval() 清除定时器），示例：

console.log("Wait 5 seconds ...");
setTimeout(delay, 5000); // 定时执行，5秒之后执行

function delay() {
    console.log("5 seconds passed");
    var count = 1;
    var timer = setInterval(counter, 1000); // 定时执行，每秒执行一次
    function counter() {
        console.log("count: " + count);
        count++;
        if (count > 5) {
            clearInterval(timer);   // 清除每秒执行一次的定时器
            console.log("Stopped");
        }
    }
}

open()/close() 方法：打开和关闭窗口 

一个浏览器中可以打开多个窗口，JavaScript 的 window 对象也提供了打开和关闭窗口的方法，示例：

console.log("Open Baidu in a new tab page");
var w = window.open("https://www.baidu.com/"); // 打开新窗口，返回新窗口的 window 对象
setTimeout(function() {
    w.close();
    console.log("Closed the Baidu page");
}, 5000);

注意：由于上述 open() 方法常被广告商用来打开广告弹出页面，因此目前大多数浏览器默认都会拦截此方法打开的新窗口。

在父窗口中，open() 的返回值即是子窗口的 window 对象；在子窗口中，可以通过 opener 属性访问父窗口的 window 对象。示例：

if (!window.opener) {
    // 父窗口从这里执行，子窗口才有 opener 属性
    var child = window.open("#");
    console.log("Self:", window);          // 子窗口的 window 对象
    console.log("Child:", child);          // 子窗口的 window 对象
    setTimeout(function(){ child.close() }, 60*1000); // 1 分钟后关闭子窗口
}
else {
    // 子窗口从这里执行
    alert("I'm a child window!");
    console.log("Self:", window);          // 子窗口的 window 对象
    console.log("Parent:", window.opener); // 父窗口的 window 对象
}

完。