在瀏覽互聯(lián)網(wǎng)時(shí),用戶可能會(huì)發(fā)現(xiàn)需要捕獲某些內(nèi)容以便向某人展示或展示,但有時(shí)網(wǎng)頁上可能存在開發(fā)人員可能不希望用戶對(duì)其進(jìn)行屏幕截圖的敏感信息。
用戶可以按功能鍵以及Windows鍵和空格鍵來進(jìn)行屏幕截圖。在 MacOS 中,我們必須使用命令、shift 和 3 來截取屏幕截圖。
在本文中,我們將了解如何阻止用戶對(duì)網(wǎng)頁進(jìn)行屏幕截圖。
如何阻止用戶截圖?
無法禁用截屏命令,因?yàn)檫@些是內(nèi)置功能并由操作系統(tǒng)控制。我們可以使用 HTML、CSS 和 JavaScript,但仍然無法阻止用戶截屏。阻止用戶截圖是一項(xiàng)艱巨的任務(wù),因?yàn)橛脩艨梢詮?fù)制粘貼網(wǎng)站內(nèi)容,也可以使用一些第三方軟件來做到這一點(diǎn)。
但是,我們可以通過一些方法來在一定程度上避免用戶對(duì)網(wǎng)頁進(jìn)行截圖。
示例
在下面的示例中,我們插入了一些文本,然后將其包含在 div 中,然后包含在 CSS 部分中。之后,我們使用媒體查詢并將顯示設(shè)置為無。這樣,內(nèi)容將對(duì)用戶可見,但用戶將無法打印屏幕。
<!DOCTYPE html> <html lang="en"> <head> <title>Example of disabling the printing </title> <style> @media print { html, body { display: none; } } </style> </head> <body> <div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </body> </html>
登錄后復(fù)制
示例
在下一個(gè)示例中,我們將通過在屏幕上顯示一條消息來警告用戶不要復(fù)制或截圖網(wǎng)頁內(nèi)容。
<!DOCTYPE html> <html lang="en"> <head> <title>Example of disabling the printing </title> <style> html { user-select: none; } </style> </head> <body> <div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </body> </html>
登錄后復(fù)制
在上面的代碼中,我們使用了與上一個(gè)示例中使用的相同段落,這次在 CSS 部分中,我們使用了 user-select 屬性并將其值設(shè)置為 none。現(xiàn)在,用戶將能夠看到屏幕上的內(nèi)容,但無法選擇它。輸出如下
示例
在下一個(gè)示例中,我們將通過在屏幕上顯示一條消息來警告用戶不要復(fù)制或截圖網(wǎng)頁內(nèi)容。
<!DOCTYPE html> <html lang="en"> <head> <title>Example of printing a warning message to the user </title> <script> alert("Please!! do not try to take any kinds of screenshot of the content"); </script> </head> <body> <div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </body> </html>
登錄后復(fù)制
在上面的代碼中,我們?cè)俅问褂昧讼嗤亩温洌⑹褂昧?JavaScript 中的一行代碼,如果用戶嘗試截取網(wǎng)頁屏幕截圖,這將會(huì)向用戶發(fā)出警告。
結(jié)論
不可能完全阻止用戶進(jìn)行任何類型的屏幕截圖或復(fù)制然后將您的內(nèi)容粘貼到其他第三方網(wǎng)站上。打印屏幕是 Windows 和 MacOS 等每個(gè)操作系統(tǒng)都提供的內(nèi)置功能,并且這些功能無法禁用,因?yàn)樗鼈冇刹僮飨到y(tǒng)控制。我們只能在一定程度上阻止用戶復(fù)制內(nèi)容,而不能超過此限度。
以上就是是否可以阻止用戶對(duì)網(wǎng)頁進(jìn)行截圖?的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章!