View Javascript image

1

I'm new to Javascript. I need to check if the user is browsing an apple or android and depending on the condition, show the corresponding store button.

<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');
    }

    
asked by anonymous 15.07.2016 / 21:34

3 answers

0

Thank you for your willingness to answer my question. With your help I managed to arrive at a satisfactory result. I know I can still improve, but from where I was I think it was a great improvement. Below is the whole code.

<!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>

    
18.07.2016 / 16:07
1

You can use this function for this:

/**
 * 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';
  }
}

You can see more options on how to do this here
I hope I have helped.

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>
    
15.07.2016 / 21:49
1

You can do this.

<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>
    
15.07.2016 / 22:03