【金秋打卡】第19天 从函数到函数式编程之路

课程名称：破解JavaScript高级玩法
课程章节：第8章 被我们忽视的BOM
主讲老师：Cloud

课程内容：

今天学习的内容包括：
8-1 window？你还有多少不知道——对window的属性进行一次全面的了解。

课程收获：

window 是啥

• 一个包含DOM文档的窗口， 表示浏览器窗口以及页面可见区域
• 是（global）全局对象，全局变量和函数均是它的属性
• 全局变量

window.isSecureContext

• 一个布尔值，标识当前上下文是否安全，安全（true）或不安全（false）
• 这个很重要的一个表现就是网页是不是https协议的
• 比如：安全的：https://www.test.com， 不安全的: http://www.test.com

window.isSecureContext

• 浏览器一些特性是仅仅限于安全上下文执行的
• 不安全的情况： https://w3c.github.io/webappsec-secure-contexts

window.isSecureContext 例外情况

• http://127.0.0.1； http://localhost
• http://*.localhost 地址(比如 http://dev.whatever.localhost/地址)
• file://url

screenX, screenY

• screenX：浏览器左边界到操作系统桌面左边界的水平距离。
• screenY：浏览器顶部距离系统桌面顶部的垂直距离。

尺寸

• innerWidth和innerHeight: 可视化区域的宽高
• outerWidth 和 outerHeight: 窗口的外层的宽高

iframe嵌套：window , self, this, parent, top

• self === window
• parent:父窗口
• this 全局上下文/全局作用域下等于window
• top:顶级窗口，最外层窗口

open, opener-window.open

• 定义：可以打开一个新空白窗口或者指定地址的新窗口。

open, opener-window.opener

• 定义：返回当前窗口的那个窗口的引用。
• 注意：如果是同源，可以直接调用其窗体的方法

窗体可见性

• focus + blur 事件

window.addEventListener( "focus" , function(){
	console.log("i-am focused" );
})
window.addEventListener( "blur" , function(){
	console.log("i-am blurred" );
})

窗体可见性

• document.hidden
• 返回布尔值，表示页面是(true)否(false)隐藏
• Document.visibilityState
• 返回document的可见性, 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签页，或者(正在)预渲染
• 可用的值：“visible”、“hidden”、“prerender”

窗体可见性-总结

• hidden 与 visibilityState 返回值不同，一个是布尔值，一个是字符串
• visibilityState 的状态多一种 prerender, 其对应的hidden的值是true
• visibilityState 有相关的事件：visibilitychange

window.devicePixelRatio

• 返回当前显示设备的物理像素分辨率与CSS像素分辨率之比。
• 物理像素：设备能控制显示的最小单位，是设备屏幕上的像素点个数。
• 逻辑像素：又称为设备独立像素，屏幕上的物理像素和逻辑像素，并不是相等， 一般是物理像素大于逻辑像素， 其比值就是devicePixelRatio

window.devicePixelRatio

• iphone12物理分辨率：1170 * 2352
• iphone12逻辑分辨率： 390 *844
• devicePixelRatio = 1170 / 390 =3

scrollTo()，scroll()，scrollBy()-其他滚动方法

• 设置scrollTop,scrollLeft等
• 设置锚点

window.matchMedia()

• 可被用于判定Document是否匹配媒体查询
• 监控一个document 来判定它匹配了或者停止匹配了此媒体查询

window.getSelection()

• 定义：表示用户选择的文本范围或光标的当前位置
• 可使用Document.activeElement 来返回当前的焦点元素
• 另外一个等价方法： Document.getSelection()，两个方法等价

window.frameElement

• 定义：返回嵌入当前window对象的元素(比如 <iframe> 或者<object>), 如果当前window对象已经是顶层窗口,则返回null.
• 例子：window.frameElement获得iframe节点，然后设置其src属性，实现调整

window.print 打印

• 打开打印对话框打印当前文档
• 打印局部内容？
• 思路，使用样式隐藏其他内容。

window.print 样式设置

• 媒体查询：@media print{ ... }
• style样式：<style media="print"> ... </style>
• link引用：<link rel="stylesheet" href="./print.css" media="print">
• import引用：@import url("print.css") print;

今天 学习了 window？你还有多少不知道。对window窗口相关属性有了一次全面的了解，知道了很多判断规则，可以运用在以后的工作中。对自己说一句，加油😀~

坚持打卡，坚持学习！明天见💪~
​
​

​