Tengo un sitio web que quiero proporcionar un botón de descarga para mis clientes que detecta automáticamente qué sistema operativo y qué versión tiene el usuario para permitirle descargar el software correcto. No solo quiero el nombre del sistema operativo, quiero detectar si la versión de Windows 10 o menos de 10 es
Entonces, en lugar de tener muchos botones etiquetados como Windows 10, Windows 9, Windows 8, solo debe haber un botón que descubra qué enlace de descarga debe proporcionarse.
Empiezo a escribir código. Puedo detectar la versión, pero no puedo detectar el número de versión y cambio el botón src según la versión. Por favor, ayuda.
let userAgent = navigator.appVersion; let osDetails = { name: 'Unknown OS', icon: 'fa-question-circle' }; if (userAgent.includes('Macintosh')) { osDetails.name = 'Mac'; osDetails.icon = 'fa-apple'; } if (userAgent.includes('Windows')) { osDetails.name = 'Windows'; osDetails.icon = 'fa-windows'; } if (userAgent.includes('Linux')) { osDetails.name = 'Linux'; osDetails.icon = 'fa-linux'; } if (userAgent.includes('iPhone')) { osDetails.name = 'iPhone'; osDetails.icon = 'fa-apple'; } if (userAgent.includes('Android')) { osDetails.name = 'Android'; osDetails.icon = 'fa-android'; } updateOsDownloadButton(osDetails); function updateOsDownloadButton(osDetails) { let iconHtml = '<i class="icon fab ' + osDetails.icon + '"></i>' document.querySelector('.btn-download-os').innerHTML = 'Download for ' + osDetails.name + iconHtml } body { background: black; font-family: 'Open Sans', sans-serif; } .container { font-weight: 700; color: white; font-size: 28px; padding: 24px; display: flex; flex-direction: column; align-items:center; } .btn-download-os { margin-top: 24px; background: linear-gradient(to right, #00B4DB, #0083B0); padding: 18px; border: none; border-radius: 8px; font-size: 24px; color: white; display: block; line-height: 24px; opacity:0.90; } .icon { padding-left: 10px; } .btn-download-os:hover { transform: scale(1.05); transition: all .5s; opacity: 1; } <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet"> <div class="container"> <div>OS Specific Download Buttons</div> <button class="btn-download-os"> Detecting Operating System <i class="icon fas fa-question-circle"></i> </button> </div> <script src="./try2.js" crossorigin="anonymous"></script>