一些有趣的web 标签属性/API

41次阅读

共计 2058 个字符,预计需要花费 6 分钟才能阅读完成。

标签
Img 标签
属性 crossorigin
值:
anonymous
use-credentials
应用场景
crossorigin:这个枚举属性表明是否必须使用 CORS 完成相关图像的抓取,

HTML 规范中图片有一个 crossorigin 属性,结合合适的 CORS 响应头,就可以实现在画布中使用跨域 <img> 元素的图像。

兼容性

属性 srcset
描述
定义了我们允许浏览器选择的图像集,以及每个图像的大小。在每个逗号之前
代码案例
<img srcset=”elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w”
sizes=”(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px”
src=”elva-fairy-800w.jpg” alt=”Elva dressed as a fairy”>
应用场景(响应式图片)

查看设备宽度
检查 sizes 列表中哪个媒体条件是第一个为真
查看给予该媒体查询的槽大小
加载 srcset 列表中引用的最接近所选的槽大小的图像

兼容性

meta 标签
属性 http-equiv

1、Expires(期限):可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。

2、Pragma(cache 模式):是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从 Cache 中再调出

3、Refresh(刷新):自动刷新并指向新页面。

(表示停 2 秒之后刷新到新的 URL)

4、Set-Cookie(cookie 设定): 如果网页过期,那么存盘的 cookie 将被删除。

5、Window-target(显示窗口的设定): 制页面在当前窗口以独立页面显示。

6、content-security-policy:内容安全策略 [http://www.ruanyifeng.com/blog/2016/09/csp.html]

描述

相当于 http 的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,

与之对应的属性值为 content,content 中的内容其实就是各个参数的变量值。

web API
Page Lifecycle API page Lifecycle API 教程 - 阮一峰

但是,它没有解决一个问题。Android、iOS 和最新的 Windows 系统可以随时自主地停止后台进程,

及时释放系统资源。也就是说,网页可能随时被系统丢弃掉。Page Visibility API 只在网页对用户不可见时触发,

至于网页会不会被系统丢弃掉,它就无能为力了。

为了解决这个问题,W3C 新制定了一个 Page Lifecycle API,统一了网页从诞生到卸载的行为模式,

并且定义了新的事件,允许开发者响应网页状态的各种转换。

兼容性 借助 PageLifecycle.js

Pointer Lock API 鼠标无限移动 JS API Pointer Lock

使用场景
这对于一些需要鼠标控制的应用非常有用。举个例子:3D 场景的旋转


目前,Pointer Lock API 共支持 3 个属性,2 个方法和 2 个事件,分别如下:

// 3 个属性
Document.pointerLockElement // 需要进行鼠标控制的元素
Document.onpointerlockchange // 状态更改监听函数
Document.onpointerlockerror // 报错回调

// 2 个方法
Element.requestPointerLock() // 进入无限状态
Document.exitPointerLock() // 退出状态

// 2 个事件
pointerlockchange
pointerlockerror
demo
Async Clipboard API (复制板)
描述

以前实现复制粘贴,借助这两个 API 来进行选中,粘贴能力

HTMLInputElement.select()

document.execCommand()

// 但是只信任用户通过应用、文档或脚本触发的复制操作。而且,复制到剪贴板的内容来源还必须是已有的 DOM 元素。


// chrome66 过后支持
navigator.clipboard
navigator.clipboard.read() //
navigator.clipboard.readText()
write(data)
writeText(data)
// 不阻塞
兼容性
navigator.clipboard 只能在“安全上下文”中使用。

什么是“安全上下文”?简单说,就是 locahost 和 HTTPS 环境下。(可以通过 window.isSecureContext 属性取得。)

桌面浏览器中目前只有 Chrome、Firefox 和 Opera 支持,Safari 和 IE/Edge 还不支持;

而且,Chrome 也只支持 readText() 和 writeText()。

正文完
 0