Rumah >hujung hadapan web >tutorial css >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:061439semak 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!