Come disabilitare il tasto destro del Mouse su un Sito Web? Come è possibile rendere il contenuto di una pagina web non riproducibile? non stampabile?
Come si Disabilita il tasto destro del Mouse?
Partiamo subito da un concetto un pò astratto ai più… Internet è condivisione! quindi perché mai dovresti rendere il tuo sito web chiuso alla selezione del testo, blindato al copia / incolla e alla stampa? per evitare il furto dei contenuti?
Devo essere sincero con te… anche io, su alcuni progetti web, adotto ed ho adottato varie tecniche per evitare il copia / incolla, la selezione e la stampa del contenuto. Si perché nonostante io sia per un internet migliore, aperto e disponibile al progresso umano so anche che però esistono delle “losche figure” che ignorano il concetto e sono alla disperata ricerca di un buon contenuto da copincollare sui propri siti web e questo ovviamente non mi va giù.
Chiariamo, prima di passare al codice, un concetto decisamente importante:
Non c’è modo di inibire davvero il tasto destro del mouse! cioè il furto dei testi, immagini o altri elementi.
Si hai capito bene, non c’è! e allora starai pensando che hai visto centinaia di siti web in cui è possibile non copiare, né selezionare né stampare la pagina. E’ vero! come ti dicevo anche io ho prodotto molti siti web con queste caratteristiche. Ho anche sviluppato un Plugin per WordPress che include questa funzione.
Web Designer, Sviluppatori Front e Back in meno di 30 secondi inibiscono queste funzioni e possono tornare a copiare, incollare e stampare le pagine web. Non 30 secondi ma 5!
Come è possibile quindi disabilitare il tasto destro del mouse, la selezione del testo, il CTRL+C / CTRL+V / CTRL+P o CMD+C / CMD+V / CMD+P?
Facile, andiamo per gradi:
1 – Innanzitutto è doveroso specificare che si può attraverso poche righe di Codice Javascript e HTML.
2 – Apri il tuo editor di codice preferito aprendo a sua volta la pagina in cui vuoi inibire il copia incolla e stampa, ad esempio index.html. Se vuoi applicare queste tecniche su un sito dinamico in php come WordPress dovrai aprire il file del tuo tema header.php
3 – Su entrambi i file dovrai aggiungere al TAG body (la parte in grassetto):
<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
4 – Salva, ricarica e sovrascrivi
5 – Ora apri un nuovo progetto sul tuo editor di codice e incolla queste poche righe di javascript:
document.addEventListener("contextmenu", function(e){
e.preventDefault();
alert('Su questo sito web non è possibile copiare i contenuti. Tutti i testi, le immagini e le grafiche sono coperte da copyright con licenza XYZ');
}, false);
6 – Salva il documento con un nome a tuo piacimento e con estensione .js ad esempio block.js. Ricorda di personalizzare l’alert cioè il messaggio che il browser stamperà a schermo. L’ho messo in grassetto per fartelo individuare facilmente.
7 – Ora dovrai incorporare questo file aggiungendo lo script alla fine del foglio prima della chiusura del </body>. Su WordPress dovrai prelevare il file del tuo tema footer.php e seguire le stesse istruzioni di un file statico:
<script async src="percorso/js/block.js"></script>
8 – Salva, ricarica e sovrascrivi
9 – Ora passiamo ad inibire la stampa di una o più pagine web attraverso poche righe di codice Css. Apri il tuo editor di codice ed incolla:
@media print {
.classe{display:none!important;}
}
Bisogna precisare che in base a come è stata realizzata la pagina web bisogna intervenire sul codice appena postato. Ad esempio, dopo aver scritto il @media print ho inserito nell’esempio .classe che sta per la classe inserita in un div o nel body o nel tag html che al comando “display:none” risponderà eliminando la visualizzazione del contenuto in fase di stampa.
10 – Puoi inserire tutta una serie di impostazioni per la stampa ampliando il codice che ho appena postato. Puoi salvarlo in stampa.css e richiamarlo, così come hai fatto per il file js di prima, tra i tag <head></head> della tua pagina web. Lo puoi fare su una pagina statica o sul file header.php di WordPress aprendola ed inserendo:
<link rel="stylesheet" type="text/css" href="percorso/stampa.css" media="print" />
L’Attributo media=”print” si riferisce specificatamente al foglio di stile dedicato alla stampa.
Ci siamo! ora gli utenti che navigano il sito in questione non possono usare il tasto destro del mouse, non possono selezionare, copiare, incollare e stampare sul tuo sito web! mai più! em.. no, mai + no.
Vuoi sapere in che modo è possibile copiare testi, immagini e stampare pagine sui siti che inibiscono questa funzione?
Lascia un Like sulla pagina Fb di TheBiBiBi e avrai la tua risposta immediatamente! come? commentano il post di questo articolo…
A presto!
