Hide HTML code

Asked

Viewed 9,469 times

4

The thing is, if you can, go to some website and disable javascript and do F5 to update. You will see that the content of the site is gone, yet if you upload it for example CTRL + U, you will see that HTML is still there all the same.

What I’d like to know is how do I hide certain HTML when javascript is disabled :)

I know there is something like this but with the Adblock script, it hides HTML as long as we have Adblock active.

But I wanted but it’s something similar or equal, but only with for javascript turned off :)

javascript html5

  • I think if you hid your body by default with CSS using body { display: none; } and used the JS to display would work.

  • 1

    You can use the tag <noscript> to display content when no javascript is enabled.

  • You want to hide the rendered page or the source code?

  • Richard Dias, maybe it works :) then expression :P Guilherme Nascimento, I want to hide the source code.

  • @Babystar then none of the examples cited will work, in fact it is not possible to hide the code, what is possible to do is to make it difficult to read it and even with Javascript enabled and you locked the contextmenu and Ctrl+U still is easy to see the source code.

  • I think I’ll do as I have for example the status board as it is up there in the upper right :) If I disable javascript you only see the board loading, and even if you go to the source code, you will not see the content code, only see the <img> tag of the loading :P This should be the best way xD

  • you must apply the tag <noscript> to check that a particular code snippet does not appear when javascript is disabled. The problem lies in the way you asked the question, as well as the title that they imply you want to hide the code.. What you seem to want is to prevent the rendering or execution of specific snippets of code.

Show 2 more comments

5 answers

2

  1. Use <iframe/>. The browser needs the generated HTML to show your site.

  2. You cannot hide HTML code completely.

  3. Don’t urge the user to search for more ways to find your code.

  4. Any client-side solution is a waste of time (and if the user disables JS?).

  5. What do you need it for?

1

Voce can load the page with display:None and when the page is loaded, a javascript script will remove this None display, so if it does not load js, the code will not be displayed.

1

You can load the page contents dynamically with AJAX, using jQuery for example. That way, if Javascript is disabled in the browser, the content will not be loaded.

jQuery has a method called .load() that allows loading the body of the response into the element.

I made a fiddle to exemplify: https://jsfiddle.net/L8u37ge7/

$("#content").load("/echo/html/", {"html": "<h1>Teste</h1><p>Texto Teste</p>"});

The load method takes a URL as a parameter. In this case I used the Jsfiddle service to create an ajax request.

More generally:

$(elemento).load(url);

0

It is not possible to hide the user’s source code once the browser has loaded it. The maximum which can be done is a condition by PHP, so the code is not shown, but as PHP is a language server-side, it cannot detect Javascript in the browser.

And another, the element <noscript> serves to display content when Javascript is disabled, but if we access the source code, all the HTML will still be there. Usually what happens on this site you went through is that the elements are only shown with Javascript, see what’s on the tag body of the site:

<body id="bg" onload="inicializar()">

That is, when the site loads will be rotated the function inicializar() which shows the content of the site, however, all the HTML is still there, only hidden visually.

I would like to take this opportunity to warn you that this practice should be avoided, after all, it is not all users who enable Javascript, making the experience of accessing your site a total disaster. Read on: Support for users who do not use Javascript is running out?

  • No no, you’re wrong xD onload="initialize()" is just to change the background of the site in real time xD :)

  • the intention is not to hide the source code.. is not to allow certain parts not to appear when disabling javascript... for this we use the tag <noscript>

0

Forget the pessimist or cautions who say it is not possible, it is perfectly possible and feasible!

I do so, I believe it is the most practical and semantic way, just you put this in your <head>, thus:

<noscript><style>.notjs{display:none:!important;}</style></noscript>

In the element you want to hide, include the class notjs, thus:

<input type="text" name="search" class="notjs">

If you are using Select2, jquery or something that breaks your design as is my case, use bootstrap, put the css version below the javascript version, this way:

<input type="text" name="search" class="notjs">
<noscript><input type="text" name="search" class="form-control"></noscript>

It will replace the input automatically, hiding one and showing the other, when javascript is enabled you can use jquery or another js library to remove the css version that will work without JS, you will find in google how to delete elements manipulating the DOM, this is quiet. Always remember that this code has no effect on the view-source, because there it does not load any code, it is just a text, more will have effect on your live page and you will not see the code in the DOM(console) and is sufficient for this type of situation.

Now, if you still believe that the user should not see that page without javascript, then we have 2 options;

!) we take the user out of the problematic page and take him to one that works only with basic (html and css).

  1. we cover the page with a black background and put a warning to inform that javascript is required.
  • In the first case we can do so:

If javascript is disabled it will redirect the user immediately to another page, surely he will be very nervous not to do what he intended, usually use the locked button of the mouse or copy something and hardly he will be able to, especially if you put this code just below the <head>. The browser will understand the message and will do what you ask, at most the person will be trying to prevent the full upload, the same technique used to access the sheet, State, the globe and others, more as the tag is at the top, will not work, are thousandths of seconds, when you think of clicking on X, it’s gone.

<!doctype html>
<html lang="en">
   <head>
     <noscript><meta http-equiv="refresh" content="0; URL='/minha-outra-pagina'"/></noscript>
  • In the second case I will not show the code, my answer turned into a tutorial, but I will give you the theoretical, you will use the same initial code, more with some differentials, the first of them is that you do not hide or touch anything, you will just change the color of the <body>, include this before </head>, thus: <noscript><style>.cnotjs{background-color:black:!important;}</style></noscript>. In the <body> let’s include the class cnotjs, thus: <body class="cnotjs">, Should be enough for no one to see anything, unless you put a blue or white text there, then the procedure is another. Finally, you will create an Alert within the tag <noscript><!--- Aqui dentro ---></noscript>, can be with a div, you should apply a Z-INDEX on Alert to ensure that it will override the other elements and that’s it, now you can sleep quietly without worrying about those things.

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.