1

Sou novo em Javascript. Preciso verificar se o usuário está navegando em um apple ou android e dependendo da condição, mostrar o botão da store correspondente.

<script type="text/javascript">
    var dispositivo = navigator.userAgent.toLowerCase();
    console.log(dispositivo);
    if(dispositivo.search(/android/) > -1) {
        //Exibir o botão da play store
    } else if(dispositivo.search(/iphone/) > -1) {
        //Exibir o botão da apple store
    } else {
        console.log('Outro device');
    }

3 Respostas 3

1

Você pode usar essa função pra isso:

/**
 * Determine the mobile operating system.
 * This function either returns 'iOS', 'Android' or 'unknown'
 *
 * @returns {String}
 */
function getMobileOperatingSystem() {
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;

  if( userAgent.match( /iPad/i ) || userAgent.match( /iPhone/i ) || userAgent.match( /iPod/i ) )
  {
    return 'iOS';

  }
  else if( userAgent.match( /Android/i ) )
  {

    return 'Android';
  }
  else
  {
    return 'unknown';
  }
}

Você pode ver mais opções de como fazer isso aqui
Espero ter ajudado.

update

<script type="text/javascript">
    //Aqui você esconde todos os botões.
    $("#apple-store").hide();
    $("#google-play").hide();

    var dispositivo = navigator.userAgent.toLowerCase();
    console.log(dispositivo);
    if(dispositivo.search(/android/) > -1) {
        //Se for android você mostra esse.
        $("#google-play").show();
    } else if(dispositivo.search(/iphone/) > -1) {
        //Se for iphone você mostra esse.
        $("#apple-store").show();
    } else {
        //e assim sucessivamente.
        console.log('Outro device');
    } 
</script>

    <button id="apple-store">Apple Store</button>
    <button id="google-play">Google Play</button>
2
  • Na verdade esse código que passei na pergunta já está trazendo o device correto, agora preciso mostrar a imagem na tela, não sei como fazer pra ele mostrar a imagem na página, dependendo do device. Commented 15/07/2016 às 19:52
  • Você pode fazer isso de várias formas vou colocar um jeito simples na resposta. Commented 15/07/2016 às 19:57
1

Pode fazer assim.

<script type="text/javascript">
var dispositivo = navigator.userAgent.toLowerCase();
console.log(dispositivo);
if(dispositivo.search(/android/) > -1) {
   var x = document.createElement("IMG");
   x.setAttribute("src", "android.jpg");
   x.setAttribute("width", "33");
   x.setAttribute("width", "33");
   document.body.appendChild(x);
} else if(dispositivo.search(/iphone/) > -1) {
   var x = document.createElement("IMG");
   x.setAttribute("src", "iphone.jpg");
   x.setAttribute("width", "33");
   x.setAttribute("width", "33");
   document.body.appendChild(x);
} else {
    console.log('Outro device');
}
</script>
7
  • pra mostrar a imagem no HTML? Commented 15/07/2016 às 20:40
  • Qual a sua dúvida? Onde quer exibir a imagem ?
    – MagicHat
    Commented 15/07/2016 às 20:41
  • Cara, não trabalho com Javascript, então não manjo nada. Sei que o retorno está vindo correto, o caminho da imagem, porém quero exibir a imagem na página.<body> <script>console.log(x)</script> </body> Commented 15/07/2016 às 20:44
  • Fiz uma alteração, vê se deu certo, se não comenta o erro que está dando.
    – MagicHat
    Commented 15/07/2016 às 20:48
  • Uncaught TypeError: Cannot read property 'appendChild' of null. Linha 15: document.body.appendChild(x); Commented 15/07/2016 às 20:53
0

Obrigado a disposição de todos em responder minha pergunta. Com a ajuda de vocês consegui chegar num resultado satisfatório. Sei que ainda dá pra melhorar, mas do ponto onde estava acho que foi um grande progresso. Segue abaixo o código inteiro.

<!DOCTYPE html>

Web Detect

<script type="text/javascript">
    var dispositivo = navigator.userAgent.toLowerCase();
    // console.log(dispositivo);
    var teste = "teste";
    if(dispositivo.search(/android/) > -1) {
        document.write(dispositivo);
        function myFunction() {
                var x = document.createElement("IMG");
                x.setAttribute("src", "img/google-play.png");
                document.body.appendChild(x);
                document.getElementById('div').appendChild(x);
            }

    } else if(dispositivo.search(/iphone/) > -1) {
        document.write(dispositivo);    
        function myFunction() {
                var y = document.createElement("IMG");
                y.setAttribute("src", "img/apple-play.png");
                document.body.appendChild(y);               
                document.getElementById('div').appendChild(y);
            }

    } else {
        //e assim sucessivamente.
        document.write('Outro device');
        function myFunction() {
                var x = document.createElement("IMG");
                x.setAttribute("src", "img/google-play.png");
                document.body.appendChild(x);
                var y = document.createElement("IMG");
                y.setAttribute("src", "img/apple-play.png");
                document.body.appendChild(y);
                document.getElementById('div').appendChild(x);
                document.getElementById('div').appendChild(y);

            }
    } 
</script>

<div id="div">

</div>

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 .