Use Javascript to Detect OS and Include External HTML

Question

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

Could you clarify? If you mean using == and === in the if/then statements, I tried that. — Benjamin Morrison
– Benjamin Morrison, Commented Feb 17, 2022 at 19:28
In all of your if statements you're performing an assignment, not a comparison. E.g. if (OSName = "Windows") should be if (OSName == "Windows") or if (OSName === "Windows") — j08691
– j08691, Commented Feb 17, 2022 at 19:29
I didn't say it was the answer. I'm just pointing our a fundamental problem in your code. Have you checked the console for errors? — j08691
– j08691, Commented Feb 17, 2022 at 19:35

Twisty · Accepted Answer · 2022-02-17 22:26:14Z

4

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

edited Feb 17, 2022 at 22:26

answered Feb 17, 2022 at 21:51

Twisty

31k2 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jon P Over a year ago

Will the shift to Client Hints affect userAgent in the future?

Benjamin Morrison Over a year ago

Thank you! Sad to say it doesn't work and the console gives me Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform

Twisty Over a year ago

@BenjaminMorrison what are your testing environments? I am using Linux with FireFox and it worked properly for me.

Benjamin Morrison Over a year ago

MacOS in Brave, Chrome and Safari all tested. There is a draft of the site here. shatteredsite.com/transmissiontest/index.php

Twisty Over a year ago

@BenjaminMorrison you have a lot of Script blocks and it does not make sense why you have all this code spread out all over the place. I would suggest you consolidate your code so you can make sure there are not rogue variables or other elements causing issues. I would also make more use of console.log() to review the content and variables through the code. Something is not lining up.

|

Nikolai · Accepted Answer · 2022-02-17 19:58:51Z

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

Collectives™ on Stack Overflow

Use Javascript to Detect OS and Include External HTML

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related