Dit bericht beschrijft het proces voor het verbergen van de JavaScript-code in de weergavebron.
Hoe JavaScript-code verbergen in View Source?
Om de JavaScript-code in de weergavebron te verbergen, leest u eerst hoe u de weergavebron opent in de ontwikkelaarstool. Op de webpagina zijn er verschillende manieren om de weergavebron te openen en de relevante code te bekijken.
De eerste manier is om “ klik met de rechtermuisknop ” op de pagina en klik op de “ Bekijk paginabron ” optie in een “ contextMenu ” of gebruik de sneltoets “ Ctrl+U ”:
Het toont de volledige broncode van de pagina in een nieuw tabblad, zoals hieronder weergegeven:
De tweede manier is om “ klik met de rechtermuisknop ” op de pagina en klik op de “ Inspecteren ' optie uit een ' contextMenu ” of gebruik de sneltoetsen “ F12 ', en ' Ctrl+Shift+I ”.
Tijdens het klikken op de ' Inspecteren ' optie, het opent het onderstaande venster met opties, waar de gebruiker de code kan zien.
Laten we functionaliteit toevoegen om te voorkomen dat rechtsklikken en sneltoetsen op een webpagina de ' Bekijk paginabron ' keuze.
Gebruik de onderstaande coderegels om rechtsklikken op een webpagina te voorkomen:
document. addEventListener ( 'contextmenu' , ( en ) => {en. voorkom standaard ( ) ;
} , vals ) ;
Het bovenstaande codefragment:
- Roep eerst de ' addEventListener() ' methode door de referentie van de ' contextmenu ”.
- Bel dan de “ voorkom standaard() ” methode en stel deze in “ vals ”, wat betekent dat het de standaard rechtsklikgebeurtenis/optie stopt.
Het onderstaande codefragment voorkomt dat de sneltoets ' Ctrl+Shift+I ”, “ Ctrl+U ' en ' F12 ”:
document. addEventListener ( 'toets neer' , ( en ) => {als ( en. ctrlKey || en. sleutelcode == 123 ) {
en. stopVoortplanting ( ) ;
en. voorkom standaard ( ) ;
}
} ) ;
Uitgang
De bovenstaande GIF geeft aan dat er geen actie wordt ondernomen tijdens ' klik met de rechtermuisknop ” of sneltoetsen:
Laten we nu eens kijken hoe we de broncode kunnen verbergen als de gebruiker de onderstaande optie gebruikt.
Het bovenstaande fragment toont een andere manier om ' Hulpprogramma's voor ontwikkelaars ” behalve rechtsklikken en sneltoetsen.
Gebruik de gegeven stappen om de JavaScript-code voor deze optie te verbergen:
Stap 1: JavaScript-code
Maak een JavaScript-bestand voor de JavaScript-code die relevant is voor de functionaliteit van de pagina. Hier hebben we een JavaScript-bestand gemaakt met de naam ' JSfile.js , waar alle JavaScript-code wordt geplaatst:
Stap 2: JavaScript-code verbergen
Verberg nu het JavaScript-bestand door deze regels code te volgen in a label:
scriptElement. type = 'tekst/javascript' ;
scriptElement. src = 'JSfile.js' ;
document. lichaam . appendKind ( scriptElement ) ;
In het bovenstaande codefragment:
- Maak een nieuw scriptelement aan met behulp van de ' createElement() ” methode.
- Voeg het JavaScript-codebestand toe ' JSfile.js ”, in het nieuw gemaakte scriptelement als een onderliggend element door de “ toevoegenKind() ” methode.
Uitgang
De bovenstaande GIF geeft aan dat in de zijbalk van de ' Bron ” tabblad, na het openen van de “ Hulpprogramma voor ontwikkelaars ', er is geen ' JS-bestand.js ”, omdat het nu een onderliggend element is van het scriptelement.
Conclusie
Om JavaScript-code in de weergavebron te verbergen, schakelt u de sneltoetsen zoals ' Ctrl+Shift+I ”, “ Ctrl+U ' en ' F12 ” die worden gebruikt om de tools van de ontwikkelaar te openen om de broncode te bekijken, en het contextmenu met de rechtermuisknop op de webpagina. Of sla het JavaScript-codebestand op in een andere scripttag. Dit bericht beschrijft het proces voor het verbergen van de JavaScript-code in de weergavebron.