Use Javascript to Detect OS and Include External HTML-CodePudding

I need to detect a user's OS, then include HTML from another file depending on which OS the user has. The rebuilt site has jQuery scripts from the old site that need to be kept, so my attempts partially utilized that. They don't have to.

When I try to run my script, nothing is displayed. I am new to 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  href="'download.php#unix_distros'" role="'button'"><span ><i ></i></span> Download v<span ></span></a>";
} else if (OSName = "Linux") {
    document.getElementById("downloadsection").innerHTML= "<a  href="'download.php#unix_distros'" role="'button'"><span ><i ></i></span> Download v<span ></span></a>";
} else {
    document.getElementById("downloadsection").innerHTML= "<a  href="'download.php'" role="'button'">Download v<span ></span></a>";
}

CodePudding user response：

Consider the following.

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/[email protected]/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>

This uses switch() which is just an organized form of multiple if statements. It simple performs the code snippet for the matched case.

I corrected all logical operators and condensed the code. No reason to repeat the code for the same items.

Regarding navigator.appVersion:

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible

navigator.userAgent is supported by all browsers. See More: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgent

CodePudding user response：

As others in the above comments pointed out - replace = with == or === in your if statements. As a single = is an assignment operator.

please refer to the JavaScript's documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators

Also the strings in your assignments are incorrect. If you are using double quotes to enclose the whole string then use only single quotes inside. Or vice versa.

your string assignment will look like this then:

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>";