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