Rumah > Artikel > hujung hadapan web > Adakah mungkin untuk menghalang pengguna daripada mengambil tangkapan skrin halaman web?

Adakah mungkin untuk menghalang pengguna daripada mengambil tangkapan skrin halaman web?

WBOYke hadapan: 2023-09-10 10:17:061405semak imbas

Semasa menyemak imbas internet, pengguna mungkin mendapati bahawa mereka perlu menangkap sesuatu untuk menunjukkan atau menunjukkan kepada seseorang, tetapi kadangkala mungkin terdapat maklumat sensitif pada halaman web yang mungkin tidak mahu pengguna tangkap skrin oleh pembangun.

Pengguna boleh menekan kekunci fungsi serta kekunci Windows dan bar ruang untuk mengambil tangkapan skrin. Dalam MacOS kita perlu menggunakan arahan, shift dan 3 untuk mengambil tangkapan skrin.

Dalam artikel ini, kita akan belajar cara menghalang pengguna daripada mengambil tangkapan skrin halaman web.

Bagaimana untuk menghalang pengguna daripada mengambil tangkapan skrin?

Arahan tangkapan skrin tidak boleh dilumpuhkan kerana ini adalah ciri terbina dalam dan dikawal oleh sistem pengendalian. Kami boleh menggunakan HTML, CSS dan JavaScript, tetapi masih tidak dapat menghalang pengguna daripada mengambil tangkapan skrin. Menghalang pengguna daripada mengambil tangkapan skrin adalah tugas yang sukar kerana pengguna boleh menyalin-tampal kandungan tapak web atau beberapa perisian pihak ketiga boleh digunakan untuk melakukan ini.

Walau bagaimanapun, kami boleh menggunakan beberapa kaedah untuk menghalang pengguna daripada mengambil tangkapan skrin halaman web pada tahap tertentu.

Contoh

Dalam contoh di bawah, kami telah memasukkan beberapa teks dan kemudian memasukkannya ke dalam div dan kemudian dalam bahagian CSS. Selepas itu kami menggunakan pertanyaan media dan tetapkan paparan kepada tiada. Dengan cara ini kandungan akan kelihatan kepada pengguna, tetapi pengguna tidak akan dapat mencetak skrin.

<!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>

Contoh

Dalam contoh seterusnya, kami akan memberi amaran kepada pengguna untuk tidak menyalin atau tangkapan skrin kandungan web dengan memaparkan mesej pada skrin.

<!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>

Dalam kod di atas, kami telah menggunakan perenggan yang sama yang kami gunakan dalam contoh sebelumnya, kali ini dalam bahagian CSS, kami telah menggunakan atribut pilihan pengguna dan menetapkan nilainya kepada tiada. Kini pengguna akan dapat melihat apa yang ada pada skrin tetapi tidak akan dapat memilihnya. Outputnya adalah seperti berikut

Contoh

Dalam contoh seterusnya, kami akan memberi amaran kepada pengguna untuk tidak menyalin atau tangkapan skrin kandungan web dengan memaparkan mesej pada skrin.

<!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>

Dalam kod di atas, kami telah menggunakan perenggan yang sama sekali lagi dan menggunakan baris kod dalam JavaScript yang akan memberi amaran kepada pengguna jika mereka cuba mengambil tangkapan skrin halaman web.

Kesimpulan

Tidak mungkin untuk menghalang sepenuhnya pengguna daripada mengambil apa-apa jenis tangkapan skrin atau menyalin dan kemudian menampal kandungan anda pada tapak web pihak ketiga yang lain. Skrin Cetak ialah ciri terbina dalam yang disediakan oleh setiap sistem pengendalian seperti Windows dan MacOS, dan ciri ini tidak boleh dilumpuhkan kerana ia dikawal oleh sistem pengendalian. Kami hanya boleh menghalang pengguna daripada menyalin kandungan sehingga satu tahap dan tidak lebih.

Atas ialah kandungan terperinci Adakah mungkin untuk menghalang pengguna daripada mengambil tangkapan skrin halaman web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html select windows macos

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Penjelasan terperinci tentang sifat kandungan muat CSS3: melaksanakan reka letak berpusat mendatarArtikel seterusnya：Penjelasan terperinci tentang sifat kandungan muat CSS3: melaksanakan reka letak berpusat mendatar

Artikel berkaitan

Lihat lagi