4

É o seguinte, se puderem, acessem um website qualquer desativem o javascript e façam F5 para atualizar. Irão ver que o conteúdo do site desapareceu, contudo se vocês carregarem por exemplo CTRL + U, vão ver que o HTML continua lá todo na mesma.

O que eu gostava de saber é como é que eu escondo certo HTML quando o javascript estiver desativado :)

Eu sei que existe algo assim parecido mas com o script do adblock, que ele esconde HTML enquanto nós tivermos o adblock ativo.

Mas eu queria mas é algo parecido ou igual, mas apenas com para com o javascript desligado :)

7
  • Acho que se você ocultasse por padrão o seu body com CSS usando body { display: none; } e utiliza-se o JS para exibir iria funcionar. Commented 9/04/2015 às 16:57
  • 1
    Você pode usar a tag <noscript> para mostrar o conteúdo quando não houver javascript ativado.
    – Franchesco
    Commented 9/04/2015 às 17:03
  • Você quer esconder a página renderizada ou o código fonte?
    – Syzoth
    Commented 9/04/2015 às 17:04
  • Richard Dias, talvez funcione :) depois exprimento :P Guilherme Nascimento, quero esconder o codigo fonte.
    – BabyStar
    Commented 9/04/2015 às 17:09
  • @BabyStar então nenhum dos exemplos citados irá funcionar, na verdade não é possivel esconder o código, o que é possível fazer é dificultar a leitura do mesmo e mesmo com JavaScript habilitado e você bloqueado o contextmenu e Ctrl+U ainda sim é fácil ver o código-fonte.
    – Syzoth
    Commented 9/04/2015 às 17:12

5 Respostas 5

2
  1. Usar <iframe/>. O browser precisa do HTML gerado para mostrar o seu site.

  2. Você não pode esconder o código HTML completamente.

  3. Não instigue o usuário a buscar mais formas de achar o seu código.

  4. Qualquer solução no lado cliente é perda de tempo (e se o usuário se desabilitar o JS?).

  5. Pra quê você precisa disso?

1

voce pode carregar a página com display:none e quando a página for carregada, um script javascript remover esse display none, entao se não carregar js, o código não será exibido.

1

Você pode carregar o conteúdo da página dinamicamente com AJAX, usando o jQuery por exemplo. Dessa forma, se o JavaScript estiver desativado no navegador, o conteúdo não será carregado.

O jQuery tem um método chamado .load() que permite carregar o corpo da resposta no elemento.

Eu fiz um fiddle para exemplificar: https://jsfiddle.net/L8u37ge7/

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

O método load recebe como parâmetro uma URL. Nesse caso eu utilizei o serviço do JsFiddle para criar uma requisição ajax.

De forma mais genérica:

$(elemento).load(url);
0

Não é possível esconder o código fonte do usuário, uma vez que o navegador já o tenha carregado. O máximo que pode ser feito é uma condição por PHP, assim o código não é mostrado, mas como o PHP é uma linguagem server-side, ele não pode detectar o JavaScript no navegador.

E outra, o elemento <noscript> serve para mostrar conteúdo quando o JavaScript está desabilitado, porém se acessarmos o código fonte, todo o HTML ainda estará lá. Geralmente o que acontece nesse site que você passou é que os elementos só são mostrados com o JavaScript , veja o que tem na tag body do site:

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

Ou seja, quando o site carregar será rodada a função inicializar() que mostra o conteúdo do site, contudo, todo o HTML ainda está lá, somente oculto visualmente.

Gostaria de aproveitar para lhe avisar que essa prática deve ser evitada, afinal, não são todos os usuário que habilitam o JavaScript, tornando a experiência de acessar seu site um desastre total. Dê uma lida: O suporte a usuários que não usam Javascript está acabando?

2
  • Não não, vc está errado xD O onload="inicializar()" serve apenas para mudar o fundo do site em tempo real xD Não tem nada a ver com o carregamento do site :P Contudo agradeço sempre as ajudas e comentarios feitos :)
    – BabyStar
    Commented 9/04/2015 às 18:45
  • a intenção não é esconder o código fonte.. é não permitir que certas partes não apareçam quandop desativar o javascript... para isso usa-se a tag <noscript> Commented 22/09/2015 às 11:13
0

Esqueça os pessimista ou preguiços que dizem não ser possivel, é perfeitamente possivel e viavel!

Eu faço assim, acredito ser o jeito mais pratico e semântico, basta você colocar isso no seu <head>, dessa forma:

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

No elemento que você quer esconder, inclua a classe notjs, dessa forma:

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

Se você estiver usando select2, jquery ou algo que quebre o seu design como é o meu caso, utilize bootstrap, coloque a versão css abaixo da versão javascript, dessa forma:

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

Ele irá substituir a input automaticamente, escondendo uma e mostrando a outra, quando o javascript estiver ativado você poderá usar jquery ou outra biblioteca js para retirar a versão css que irá funcionar sem JS, você vai encontrar no google como excluir elementos manipulando o DOM, isso é tranquilo. Sempre lembrando que este código não tem efeito na view-source, pois ali ele não carrega código nenhum, é apenas um texto, mais terá efeito na sua pagina ao vivo e você não verá o código no DOM(console) e é suficiente para este tipo de situação.

Agora, se mesmo assim você acredita que o usuário não deve ver aquela pagina sem javascript, então temos 2 opções;

!) tiramos o usuário da pagina problemática e levamos ele para uma que funcione apenas com o básico (html e css).

  1. cobrimos a pagina com um fundo preto e colocamos um aviso para informar que o javascript é necessário.
  • No primeiro caso podemos fazer assim:

Se o javascript estiver desativado ele vai redirecionar o usuário imediatamente para outra pagina, certamente ele ficará muito nervoso por não fazer o que estava pretendendo, geralmente usar o botão bloqueado do mouse ou copiar alguma coisa e dificilmente ele conseguirá, principalmente se você colocar este código logo abaixo do <head>. O navegador vai entender o recado e vai fazer o que você pede, no máximo a pessoa ficará tentando impedir o carregamento total, a mesma técnica usada para acessar a folha, estadão, o globo e outros, mais como a tag está no topo, não funcionará, são milésimos de segundos, quando você pensar em clicar no X, já foi.

<!doctype html>
<html lang="en">
   <head>
     <noscript><meta http-equiv="refresh" content="0; URL='/minha-outra-pagina'"/></noscript>
  • No segundo caso eu não vou mostrar o código, minha resposta virou um tutorial, mais vou te dar a teórica, você vai usar o mesmo código inicial, mais com alguns diferenciais, o primeiro deles é que você não esconder ou mexer em nada, você vai apenas mudar a cor do <body>, inclua isso antes de </head>, dessa forma: <noscript><style>.cnotjs{background-color:black:!important;}</style></noscript>. No <body> vamos incluir a classe cnotjs, dessa forma: <body class="cnotjs">, deve ser o suficiente para ninguém ver nada, a não ser que você coloque um texto azul ou branco lá, ai o procedimento é outro. Por fim, você vai criar um alert dentro da tag <noscript><!--- Aqui dentro ---></noscript>, pode ser com uma div, você deve aplicar um Z-INDEX no alert para garantir que ele irá sobrepor os outros elementos e é isso, agora você pode dormir sossegado, sem se preocupar com essas coisas.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .