Necesito detectar el sistema operativo de un usuario, luego incluir HTML de otro archivo según el sistema operativo que tenga el usuario. El sitio reconstruido tiene secuencias de comandos jQuery del sitio anterior que deben conservarse, por lo que mis intentos lo utilizaron parcialmente. No tienen que hacerlo.
Cuando intento ejecutar mi script, no se muestra nada. Soy nuevo en JS.
var OSName="Unknown OS"; if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows"; if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS"; if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX"; if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux"; if (OSName = "Windows") { $(function(){ $("#downloadsection").load("apple_download_include.html"); }); } else if (OSName = "MacOS") { $(function(){ $("#downloadsection").load("windows_download_include.html"); }); } else if (OSName = "UNIX") { document.getElementById("downloadsection").innerHTML= "<a class="'btn btn-labeled btn-danger me-sm-3 fw-bold mt-3'" href="'download.php#unix_distros'" role="'button'"><span class="'btn-label'"><i class="'fa-brands fa-linux'"></i></span> Download v<span class="'current-version'"></span></a>"; } else if (OSName = "Linux") { document.getElementById("downloadsection").innerHTML= "<a class="'btn btn-labeled btn-danger me-sm-3 fw-bold mt-3'" href="'download.php#unix_distros'" role="'button'"><span class="'btn-label'"><i class="'fa-brands fa-linux'"></i></span> Download v<span class="'current-version'"></span></a>"; } else { document.getElementById("downloadsection").innerHTML= "<a class="'btn btn-danger btn-lg px-4 me-sm-3 fw-bold mt-3'" href="'download.php'" role="'button'">Download v<span class="'current-version'"></span></a>"; }Considera lo siguiente.
var OSName = "unknown"; var navApp = navigator.userAgent.toLowerCase(); switch (true) { case (navApp.indexOf("win") != -1): OSName = "windows"; break; case (navApp.indexOf("mac") != -1): OSName = "apple"; break; case (navApp.indexOf("linux") != -1): OSName = "linux"; break; case (navApp.indexOf("x11") != -1): OSName = "unix"; break; } console.log(OSName, navApp); if (OSName == "windows" || OSName == "apple") { $("#downloadsection").load(OSName + "_download_include.html"); } else { var link = $("<a>", { class: "btn btn-labeled btn-danger me-sm-3 fw-bold mt-3", role: "button", href: "download.php#unix_distros" }).appendTo("#downloadsection"); $("<span>", { class: "btn-label" }).appendTo(link); $("<i>", { class: "fa-brands fa-linux" }).appendTo($("span.btn-label", link)); $("span.btn-label", link).append(" Download v<span class='current-version'>0.0.1</span>"); if (OSName != "unix" && OSName != "linux") { link.toggleClass("btn-label btn-lg px-4"); $(".fa-brands", link).remove(); link.attr("href", "download.php"); } } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="downloadsection"></div> Esto usa switch() que es solo una forma organizada de múltiples sentencias if . Simplemente ejecuta el fragmento de código para el caso coincidente.
Corregí todos los operadores lógicos y condensé el código. No hay razón para repetir el código para los mismos artículos.
Con respecto a navigator.appVersion :
En desuso: esta función ya no se recomienda. Aunque es posible que algunos navegadores aún lo admitan, es posible que ya se haya eliminado de los estándares web relevantes, que esté en proceso de eliminación o que solo se conserve por motivos de compatibilidad. Evite usarlo y actualice el código existente si es posible
navigator.userAgent es compatible con todos los navegadores. Ver más: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgent
Como señalaron otros en los comentarios anteriores, reemplace = con == o === en sus declaraciones if. Como un solo = es un operador de asignación.
consulte la documentación de JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators
Además, las cadenas en sus asignaciones son incorrectas. Si usa comillas dobles para encerrar toda la cadena, use solo comillas simples dentro. O viceversa.
su asignación de cadena se verá así entonces:
document.getElementById("downloadsection").innerHTML= "<a class='btn btn-labeled btn-danger me-sm-3 fw-bold mt-3' href='download.php#unix_distros' role='button'><span class='btn-label'><i class='fa-brands fa-linux'></i></span> Download v<span class='current-version'></span></a>";