8

标签

Img标签

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

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

clipboard.png

clipboard.png

属性 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列表中引用的最接近所选的槽大小的图像
兼容性

clipboard.png

clipboard.png

meta标签

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

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

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

    <meta http-equiv="Refresh" content="2;URL=http://www.net.cn/">(表示停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,统一了网页从诞生到卸载的行为模式,

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

clipboard.png

兼容性 借助 PageLifecycle.js

clipboard.png

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()。

fashen007
4.7k 声望156 粉丝

被偏爱的,有恃无恐吧了