是否可以阻止用户截取网页屏幕截图?
在浏览互联网时,用户可能需要截取某些内容以便展示或向他人展示,但有时网页上可能包含敏感信息,开发者可能不希望用户截取屏幕截图。
用户可以同时按下功能键、Windows键和空格键来截取屏幕截图。在 MacOS 中,需要使用 Command + Shift + 3 来截取屏幕截图。
在这篇文章中,我们将了解如何阻止用户截取网页屏幕截图。
如何阻止用户截取屏幕截图?
截取屏幕截图的命令无法禁用,因为这些是内置功能,由操作系统控制。我们可以使用 HTML、CSS 和 JavaScript,但仍然无法阻止用户截取屏幕截图。阻止用户截取屏幕截图是一项困难的任务,因为用户可以复制和粘贴网站内容,也可以使用一些第三方软件来做到这一点。
但是,我们可以使用一些方法来在一定程度上避免用户截取网页屏幕截图。
示例
在下面的示例中,我们插入了一些文本,然后将其放在一个 div 中,然后在 CSS 部分。之后,我们使用了媒体查询并将显示设置为 none。这样,用户可以看到内容,但无法打印屏幕。
<!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>
示例
在下一个示例中,我们将通过在屏幕上显示一条消息来警告用户不要复制或截取网页内容。
<!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>
在上面的代码中,我们使用了与前一个示例中相同的段落,这次在 CSS 部分,我们使用了 user-select 属性并将它的值设置为 none。现在用户可以在屏幕上看到内容,但无法选择它。输出将如下所示。
示例
在下一个示例中,我们将通过在屏幕上显示一条消息来警告用户不要复制或截取网页内容。
<!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>
在上面的代码中,我们再次使用了相同的段落,并使用了一行 JavaScript 代码,如果用户试图截取网页屏幕截图,它将向用户发出警告。
结论
完全阻止用户截取任何类型的屏幕截图或复制然后粘贴您的内容到其他第三方网站是不可能的。打印屏幕是一个内置功能,每个操作系统(如 Windows 和 MacOS)都提供此功能,并且这些功能无法禁用,因为它们由操作系统控制。我们只能在一定程度上阻止用户复制内容,而不能完全阻止。