资讯专栏INFORMATION COLUMN

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

468122151 / 2665人阅读

摘要:内容安全策略描述相当于的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为,中的内容其实就是各个参数的变量值。可以通过属性取得。

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

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

属性 srcset
描述

定义了我们允许浏览器选择的图像集,以及每个图像的大小。在每个逗号之前

代码案例
Elva dressed as a fairy
应用场景(响应式图片)

查看设备宽度

检查sizes列表中哪个媒体条件是第一个为真

查看给予该媒体查询的槽大小

加载srcset列表中引用的最接近所选的槽大小的图像

兼容性

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,统一了网页从诞生到卸载的行为模式,

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

兼容性 借助 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()。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102269.html

相关文章

  • 有趣API:Page Visibility API 页面可见性

    摘要:所有属性两个属性,一个方法只读返回一个布尔值,显示当前页面是否不可见。可能的值页面内容至少是部分可见。在实际中,这意味着页面是非最小化窗口的前景选项卡。注释浏览器支持是可选的页面状态切换时的事件。参考资料张鑫旭博客页面可见性介绍微拓展 今天在知乎上看到一篇文章,说到了用window.blur 和 window.focus事件来动态改变网页的title, Page Visibility这...

    AndroidTraveler 评论0 收藏0
  • 从DOM选择器返回值说起

    摘要:原文发布在我的独立博客上从选择器的返回值说起抛开大大解放生产力的,使用获取元素要使用方法,或类似的,第一种情况下,根据获取时,返回值是唯一的元素而根据等获取时候,返回值是包含所有符合条件的多个元素的列表。 原文发布在我的独立博客上 ~: 从DOM选择器的返回值说起 抛开大大解放生产力的jQuery,使用JS获取元素要使用getElementById方法,或类似的getElem...

    lmxdawn 评论0 收藏0
  • 【译】前端练级攻略

    摘要:由于系统变得越来越复杂,人们提出了称为预处理器和后处理器的工具来管理复杂性。后处理器在由预处理器手写或编译后对应用更改。我之前建议的文章,,也涵盖了预处理器相关的知识。 译者:前端小智 原文:medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我记得我刚开始学习前端开发的时候。我看到了很多文章及...

    wuyumin 评论0 收藏0

发表评论

0条评论

468122151

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<