window、document、Navigator属性
// Secure Contexts: 有些webapi需要安全上下文环境
window.trustedTypes ?
window.frames 返回伪数组元素是 iframe.contentWindow,也许不能访问
// window[0], [1] 返回 window 中的 iframe,不能覆盖 // 在 Firefox 中可以用 js 检测到
[部分元素的 name], [任意元素的 id] 返回元素,他们不能用 js 的方法检测到,因为保存在 window.__proto__.__proto__ 上,它是一个不符合 js 规范的对象。 // Firefox 下 window.__proto__.__proto__ instanceof Proxy 报错
window 属性:parent,top,self
window 的 scroll 方法可以滚动overflow:hidden的文档
// 新增了 scrollend 事件
Window.devicePixelRatio像素比 // 物理像素/device-width,Chrome Firefox ctrl+/- 会改变这个值, safari bug
window.name 即便页面发生了跳转,这个值依然不会变化,并且可以跨域使用
window.close() 只能关闭用open方法打开的窗口
window.open() 用户操作打开页面// _blank打开的页面相当于open,使用 ref=noopener 让打开的页面不能访问 opener和 document.referrer 防止用户被钓鱼,不支持这个属性值的可以用 open 来模拟(重置opener和打开的页面的url)。
window.matchMedia() 匹配css媒体查询
window.onbeforeunload 的事件处理函数只要返回值不是undefined就显示页面关闭提示框 //函数中其它弹框都不会执行
Location.host 包含端口号
window.onerror // 捕获为处理的错误,可以使用 preventDefault / return true;
window.onnavigator // 草案,切换页面时2个 window 有一段时间共存,期间可以做切换页面的动画
window.getScreens // 多屏幕草案
window.launchQueue // PWA 启动参数
window.queryLocalFonts // 查询本地字体
页面当前滚动位置:
window.pageYOffset == window.scrollY; // 总是返回 true,scrollY is Editor's Draft
兼容方案:
var y = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
HTML5属性:
scrollMaxX 非标准属性,可以使用 document.body.scrollWidth - innerWidth 替代
length 返回 iframe的数目
screenY 浏览器在屏幕上的位置,单位 css 像素(手机有状态栏还是0?)
screen 屏幕信息,单位也是 css 像素,avail表示浏览器可用空间
// getScreenDetails 返回多屏幕信息
screen.orientation.lock() // 前提是要全屏状态下,进全屏需要用户互动。当然锁定屏幕方向就可以用代码了
screen.keepAwake// wake-lock API 禁止关屏幕 https://web.dev/wake-lock/
传感器:
- Window.ondevicelight ,光感应 // 有新的通用传感器api草案
- Window.ondeviceorientation 设备方向 // 等于screen.onorientationchang
onpagehide/onpageshow 在后退前进时(直接调用缓存,不会产生load相关事件)也能产生load 事件,时间在 load 之后
onblur 跟 document.hidden 效果有点类似,但也有区别,这个表示焦点不在页面上,页面隐藏不一定触发
// mobile中 使用visibilitychange 监听 app 或者标签之间的切换
============================
document.activeElement 类似于焦点元素,但 activeElement 元素并不一定聚焦,比如页面失焦时 元素会失去焦点,但是 activeElement 不会变
document.hidden / document.visibilityState // 页面的可见性与父页面相同.使用 CSS 隐藏或显示这个 iframe 并不会触发它的 visibilitychange 事件.
document.scrollingElement // 标准模式返回 html 元素,怪异模式返回 body(webkit 以及微信标准模式也是 body),使都能用 scrollTop/scrollLeft 滚动文档
document.rootSroller 让任意元素的滚动条具备 root 滚动条的效果,如向下滚动元素时隐藏 URL 栏
document.referrer // 返回跳转到该页面的原网址,跟history的处理机制完全不同,不接受history.push的,请求头中使用的是错误的 Referer。https 到 http 不带,跨域没有路径。
// visibilitychange,切换该窗口标签时发生,只能通过 addEventListener 来监听,产生在window 加载之前
document.hasFocus 页面或者页面中的元素是否获得了焦点。获得焦点的元素一定是活动元素
document.fonts // 管理页面的字体,可以手动下载(前提是font-face设置,不然要使用才会开始下载)
document.fullscreen 文档是否是全屏状态 // document.onfullscreenchange 执行handle时已经全屏改变完 //document.fullscreenElement
// element.requestFullscreen:chrome原始尺寸居中(:-webkit-full-screen设置),请求元素之下其它之上有一个::backdrop(dialog,video下面也有)。
iframe 插入内容可以用 iframe.contentDocument.write();
document.caretPositionFromPoint() // 在指定点创建range(包含元素上偏移的字符数属性)
document.inputEncoding // 渲染使用的字符编码,默认与meta charset相同,已被废弃,统一使用utf-8
各种集合,forms,fonts,images,links...
document.lastModified // 响应头中的, document.contentType 是浏览器自己检测的
body 可以滚动,加overflow:hidden效果跟普通元素一样位置回到顶部,可以给html添加不改变位置
document.adoptNode 会保持原文档中的事件绑定
createElement 可以创建未定义的元素,包含 '-' 是 HTMLElement 的实例,不然是 HTMLUnknownElement
============================
Navigator.languages 通常就是请求头中的 Accept-Language
Navigator.sendBeacon 以post方式异步发送小段数据(不会接收响应),window 卸载后不会取消
Navigator.permissions 返回一个Permissions object.其 query 方法返回一个promise对象
navigator.hardwareConcurrency 可用处理器个数
navigator.vibrate // ios 不支持
navigator.webdriver
navigator.credentials // chrome 支持读取短信中的 otp(一次性密码)
navigator.clipboard
navigator.mediaSession
navigator.mediaDevices // firefox 能指定音频输出设备
navigator.gpu
navigator.share
navigator.locks https://w3c.github.io/web-locks/
navigator.storage // 转持久储存、空间查询、获取 OPFS 目录,清除时是一个 origin 的数据一起删除
navigator.userAgentData // chrome
navigator.connection // Firefox 桌面不支持
navigator.nfc // chrome
navigator.ink // chrome 高性能手写画图
nacigator.bluetooth // chrome
nacigator.usb // chrome
navigator.screen // chrome,能检测到第二屏幕,可以将 window 显示在第二屏幕
navigator.keyboard // chrome
navigator.virtualKeyboard // chrome
navigator.serial // chrome
navigator.scheduling // chrome
navigator.presentation // chrome
navigator.windowControlsOverlay // chrome PWA 标题栏覆盖