Hide ou Show div no onload html

Front-end
, ,
#1

Boa tarde,
estou estudando um pouco de js e estou precisando de uma ideia.

Dependendo do navegador eu gostaria de mostrar o div a ou div b…
Eu consegui fazer isso… detecto o navegador, fiz um if pra mostrar o div a ou div b.
Acontece que quando abro o html, ele motra o div a, o div b e depois esconde um deles.
Isso fica um pouco esquisito visualmente e confuso para o cliente.

O código que fiz foi mais ou menos assim:

<html>
<body>
<diva> mostrar algo </diva>
<divb> mostrar algo
...
...
...
...
</body>
</html>


<script>
```
window.document.onload = detectarNavegador;

function detectarNavegador(){
    ...... // codigos para descobrir navegador
    if(chrome){
       // show.div1;
       //hide.div2;
     }else{
           // hide.div1;
       //show.div2;
}

}

</script>

O código não esta correto como eu fiz,e funciona. Porém esse negocio de aparecer e depois sumir esta incomodando… Alguém tem alguma ideia de mudar isso?
Que ele detecte e antes de mostrar nem mostre o div que não quero e somente o que esta correto para aquele navegador?

#2

Usa o evento DOMContentLoaded.
Exemplo: https://jsfiddle.net/yaeg9pqw/

#3

Muito bom!
Vou testar na segunda.
Tem algum link para eu estudar esta estrutura de dados em javascript “=> {”…
Não entendi o que isso faz…

Segunda eu testo muito obrigado!!!

#4

É uma nova forma de trabalhar com função em javascript, chamado de arrow function. Particularmente ainda trabalho da forma antiga, nem tinha reparado que o exemplo que te passei estava da forma nova, copiei de algum lugar e adaptei pra sua dúvida.

Sobre o link:

Atenção que não muda só pela sintaxe ser mais curta, o contexto do this por exemplo não é o mesmo em comparação a forma clássica function(), como citado na própria documentação. Quem tenta sair fazendo refactoring da forma clássica pra nova pode ter surpresas desagradáveis ou achar que é erro de bibliotecas de terceiros. Sao características diferentes do próprio javascript.

1 curtida
#5

Entendi legal!
Sobre a função… ela pode ser usada no onload da pagina certo?
Obrigado!

#6

Pode. Mas no onload vai ter o efeito indesejado que era seu problema.

#8

Então amigo, eu preciso disso exatamente no onload… Quando abrir a tela e verifica o navegador… É IE? Ok, mostra o div 1 é outro navegador mostra o div2 entendeu? :frowning: alguma idéia?

#9

Testou com o evento DOMContentLoaded que te indiquei? Poste o código que tentou com esse evento.

#10

Exemplo funcionando com um dos ifs: https://jsfiddle.net/8xe9j5tz/ O resto é lógica.

Ideal seria trabalhar também com CSS. Mas respondi sua dúvida do jeito que estava fazendo.

1 curtida
#11

Javaflex acabei mudando de planos. Não deu certo fazer isso não sei pq, mas não tenho tempo habil momento para saber pq…
Como vi seu codigo funcionando no link que vc passou vou colocar sua resposta como correta.

Obrigado pela ajuda!

1 curtida
#12

Tudo bem, mas na próxima vez mesmo quando a versão que você fizer não der certo, basta postar todo o codigo que fez, assim conseguiriamos identificar o que deu de errado ai.