为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第19天 从函数到函数式编程之路

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

2022.11.11 11:49 95浏览

课程名称:破解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
window.isSecureContext 例外情况
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窗口相关属性有了一次全面的了解,知道了很多判断规则,可以运用在以后的工作中。对自己说一句,加油😀~

坚持打卡,坚持学习!明天见💪~


https://img2.sycdn.imooc.com/636db0250001983b23411630.jpg

https://img1.sycdn.imooc.com/636db9e6000120fc23271624.jpg

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
全栈工程师
手记
粉丝
9
获赞与收藏
1

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消