本系列随笔是本人的学习笔记,初学阶段难免会有理解不当之处,错误之处恳请指正。转载请注明出处: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 对象 }
完。