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).
- 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.
CSS
usandobody { display: none; }
e utiliza-se o JS para exibir iria funcionar.<noscript>
para mostrar o conteúdo quando não houver javascript ativado.