是否可以阻止使用者對網頁進行截圖？-css教學-PHP中文網

首頁

web前端

css教學

是否可以阻止使用者對網頁進行截圖？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 10, 2023 am 10:17 AM

是否可以阻止使用者對網頁進行截圖？

在瀏覽網路時，使用者可能會發現需要擷取某些內容以便向某人展示或展示，但有時網頁上可能存在開發人員可能不希望使用者對其進行螢幕截圖的敏感資訊。

使用者可以按下功能鍵以及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 中的一行程式碼，如果使用者嘗試截取網頁螢幕截圖，這將會向使用者發出警告。