資訊專欄INFORMATION COLUMN
摘要：內(nèi)容安全策略描述相當(dāng)于的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁(yè)內(nèi)容，與之對(duì)應(yīng)的屬性值為，中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值。可以通過屬性取得。
標(biāo)簽 Img標(biāo)簽
值：
anonymous use-credentials
應(yīng)用場(chǎng)景
crossorigin： 這個(gè)枚舉屬性表明是否必須使用 CORS 完成相關(guān)圖像的抓取， HTML 規(guī)范中圖片有一個(gè) crossorigin 屬性，結(jié)合合適的 CORS 響應(yīng)頭，就可以實(shí)現(xiàn)在畫布中使用跨域元素的圖像。
兼容性屬性 srcset
描述
定義了我們?cè)试S瀏覽器選擇的圖像集，以及每個(gè)圖像的大小。在每個(gè)逗號(hào)之前
代碼案例
應(yīng)用場(chǎng)景（響應(yīng)式圖片）
查看設(shè)備寬度
檢查sizes列表中哪個(gè)媒體條件是第一個(gè)為真
查看給予該媒體查詢的槽大小
加載srcset列表中引用的最接近所選的槽大小的圖像
兼容性meta標(biāo)簽
值
1、Expires(期限)：可以用于設(shè)定網(wǎng)頁(yè)的到期時(shí)間。一旦網(wǎng)頁(yè)過期，必須到服務(wù)器上重新傳輸。
2、Pragma(cache模式)：是用于設(shè)定禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁(yè)面內(nèi)容，設(shè)定后一旦離開網(wǎng)頁(yè)就無(wú)法從Cache中再調(diào)出
3、Refresh(刷新)：自動(dòng)刷新并指向新頁(yè)面。
＜meta http-equiv="Refresh" content="2；URL=http://www.net.cn/"＞（表示停2秒之后刷新到新的URL）
4、Set-Cookie(cookie設(shè)定): 如果網(wǎng)頁(yè)過期，那么存盤的cookie將被刪除。
5、Window-target(顯示窗口的設(shè)定): 制頁(yè)面在當(dāng)前窗口以獨(dú)立頁(yè)面顯示。
6、content-security-policy： 內(nèi)容安全策略 [http://www.ruanyifeng.com/blog/2016/09/csp.html]
描述
相當(dāng)于http的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁(yè)內(nèi)容， 與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值。web API Page Lifecycle API page Lifecycle API 教程-阮一峰
但是，它沒有解決一個(gè)問題。Android、iOS 和最新的 Windows 系統(tǒng)可以隨時(shí)自主地停止后臺(tái)進(jìn)程， 及時(shí)釋放系統(tǒng)資源。也就是說，網(wǎng)頁(yè)可能隨時(shí)被系統(tǒng)丟棄掉。Page Visibility API 只在網(wǎng)頁(yè)對(duì)用戶不可見時(shí)觸發(fā)， 至于網(wǎng)頁(yè)會(huì)不會(huì)被系統(tǒng)丟棄掉，它就無(wú)能為力了。 為了解決這個(gè)問題，W3C 新制定了一個(gè) Page Lifecycle API，統(tǒng)一了網(wǎng)頁(yè)從誕生到卸載的行為模式， 并且定義了新的事件，允許開發(fā)者響應(yīng)網(wǎng)頁(yè)狀態(tài)的各種轉(zhuǎn)換。
兼容性 借助 PageLifecycle.jsPointer Lock API 鼠標(biāo)無(wú)限移動(dòng) JS API Pointer Lock
使用場(chǎng)景
這對(duì)于一些需要鼠標(biāo)控制的應(yīng)用非常有用。舉個(gè)例子：3D場(chǎng)景的旋轉(zhuǎn)
值
目前，Pointer Lock API共支持3個(gè)屬性，2個(gè)方法和2個(gè)事件，分別如下： // 3個(gè)屬性 Document.pointerLockElement // 需要進(jìn)行鼠標(biāo)控制的元素 Document.onpointerlockchange // 狀態(tài)更改監(jiān)聽函數(shù) Document.onpointerlockerror // 報(bào)錯(cuò)回調(diào) // 2個(gè)方法 Element.requestPointerLock() // 進(jìn)入無(wú)限狀態(tài) Document.exitPointerLock() // 退出狀態(tài) // 2個(gè)事件 pointerlockchange pointerlockerror
demoAsync Clipboard API (復(fù)制板)
描述
以前實(shí)現(xiàn)復(fù)制粘貼，借助這兩個(gè)API來(lái)進(jìn)行選中，粘貼能力 HTMLInputElement.select() document.execCommand() // 但是只信任用戶通過應(yīng)用、文檔或腳本觸發(fā)的復(fù)制操作。而且，復(fù)制到剪貼板的內(nèi)容來(lái)源還必須是已有的DOM元素。
值
// chrome66 過后支持 navigator.clipboard navigator.clipboard.read() // navigator.clipboard.readText() write(data) writeText(data)
// 不阻塞
兼容性
navigator.clipboard只能在“安全上下文”中使用。 什么是“安全上下文”？簡(jiǎn)單說，就是locahost和HTTPS環(huán)境下。（可以通過 window.isSecureContext屬性取得。） 桌面瀏覽器中目前只有Chrome、Firefox和Opera支持，Safari和IE/Edge還不支持； 而且，Chrome也只支持readText()和writeText()。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/102269.html
摘要：所有屬性兩個(gè)屬性，一個(gè)方法只讀返回一個(gè)布爾值，顯示當(dāng)前頁(yè)面是否不可見。可能的值頁(yè)面內(nèi)容至少是部分可見。在實(shí)際中，這意味著頁(yè)面是非最小化窗口的前景選項(xiàng)卡。注釋瀏覽器支持是可選的頁(yè)面狀態(tài)切換時(shí)的事件。參考資料張?chǎng)涡癫┛晚?yè)面可見性介紹微拓展 今天在知乎上看到一篇文章，說到了用window.blur 和 window.focus事件來(lái)動(dòng)態(tài)改變網(wǎng)頁(yè)的title, Page Visibility這...
摘要：原文發(fā)布在我的獨(dú)立博客上從選擇器的返回值說起拋開大大解放生產(chǎn)力的，使用獲取元素要使用方法，或類似的，第一種情況下，根據(jù)獲取時(shí)，返回值是唯一的元素而根據(jù)等獲取時(shí)候，返回值是包含所有符合條件的多個(gè)元素的列表。 原文發(fā)布在我的獨(dú)立博客上 ~： 從DOM選擇器的返回值說起 拋開大大解放生產(chǎn)力的jQuery，使用JS獲取元素要使用getElementById方法，或類似的getElem...
摘要：由于系統(tǒng)變得越來(lái)越復(fù)雜，人們提出了稱為預(yù)處理器和后處理器的工具來(lái)管理復(fù)雜性。后處理器在由預(yù)處理器手寫或編譯后對(duì)應(yīng)用更改。我之前建議的文章，，也涵蓋了預(yù)處理器相關(guān)的知識(shí)。 譯者：前端小智 原文：medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我記得我剛開始學(xué)習(xí)前端開發(fā)的時(shí)候。我看到了很多文章及...
閱讀 1924·2023-04-26 01:02
閱讀 5065·2021-11-24 09:39
閱讀 1945·2019-08-30 15:44
閱讀 3127·2019-08-30 11:10
閱讀 1864·2019-08-30 10:49
閱讀 1146·2019-08-29 17:06
閱讀 678·2019-08-29 16:15
閱讀 977·2019-08-29 15:17
