是否可以阻止用户对网页进行截图？

百变鹏仔 3个月前 (09-20) #CSS

文章标签截图

在浏览互联网时，用户可能会发现需要捕获某些内容以便向某人展示或展示，但有时网页上可能存在开发人员可能不希望用户对其进行屏幕截图的敏感信息。

用户可以按功能键以及Windows键和空格键来进行屏幕截图。在 MacOS 中，我们必须使用命令、shift 和 3 来截取屏幕截图。

在本文中，我们将了解如何阻止用户对网页进行屏幕截图。

如何阻止用户截图？

无法禁用截屏命令，因为这些是内置功能并由操作系统控制。我们可以使用 HTML、CSS 和 JavaScript，但仍然无法阻止用户截屏。阻止用户截图是一项艰巨的任务，因为用户可以复制粘贴网站内容，也可以使用一些第三方软件来做到这一点。

但是，我们可以通过一些方法来在一定程度上避免用户对网页进行截图。

示例

在下面的示例中，我们插入了一些文本，然后将其包含在 div 中，然后包含在 CSS 部分中。之后，我们使用媒体查询并将显示设置为无。这样，内容将对用户可见，但用户将无法打印屏幕。

<!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 等每个操作系统都提供的内置功能，并且这些功能无法禁用，因为它们由操作系统控制。我们只能在一定程度上阻止用户复制内容，而不能超过此限度。

文章推荐

是否可以阻止用户对网页进行截图？

如何阻止用户截图？

示例

示例

示例

结论

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写