load HTML into

Question

Fiddle: https://jsfiddle.net/x9ghz1ko/ (With comments.)

I have an HTML-document, inside of this document, there are two sections: <section class="desktop_only"> and <section class="mobile_only"> – In the code, before these sections, there is a script, this script should delete one of the two sections, but the problem is: For this to work, I have to place the script after the sections but I can't do that, because there are more scripts inside of the sections and I have to delete them before they run.

Simplified version of my code: (…not working.)

<script>
device = "desktop"; // This could be either: "desktop", or: "mobile"

if(device === "desktop"){
        document.querySelector(".mobile_only").remove(); // Not doing anything.
} else {
        document.querySelector(".desktop_only").remove(); // Not doing anything.
}
</script>

<section class="desktop_only">
    <script src="example.js"></script>
    <script> console.log("desktop_only") </script>
    <div> desktop </div>
</section>

<section class="mobile_only">
    <script src="example.js"></script>
    <script> console.log("mobile_only") </script>
    <div> mobile (Delete this.) </div>
</section>

Maybe one solution would be: I have an empty <div>, called, let's say: ".platform_dependent" and I have two external files called: desktop_only.something and mobile_only.something and then I load the content of on of these files into: platform_dependent.innerHTML …but I don't know how to do this?

You are executing your script before the HTML is loaded. Move the — Jeremy Thille, Jan 12 '21 at 13:41
@JeremyThille I know, but I can't do this, because then the following thing would happen: All the scripts, inside of: `desktop_only` and `mobile_only` would run and then I would delete them, but they would have already been executed – That's the problem. — Simon R., Jan 12 '21 at 13:44
Delete your question? Of course not. I only marked it as a duplicate. The error is obvious and frequently asked. I don't understand why you "can't" move the script after the HTML. What do you mean "I would delete them"? — Jeremy Thille, Jan 12 '21 at 13:52
@JeremyThille you didn't read the question. The OP knows the loading order, but is trying to avoid running the scripts in the divs before the appropriate one can be be removed. — pilchard, Jan 12 '21 at 13:53
Fair enough, reopened the question. To get back to the topic, there's absolutely no point writing ` — Jeremy Thille, Jan 12 '21 at 13:55
@SimonR. look at this question: [Inject a script tag with remote src and wait for it to execute](https://stackoverflow.com/questions/8578617/inject-a-script-tag-with-remote-src-and-wait-for-it-to-execute). — pilchard, Jan 12 '21 at 13:55
@JeremyThille Sorry man, I got a notification, that someone closed the question and it took quite some time to write it… I know, that I have to move a script that deletes an element after the element and not before it, I actually wrote this into the question, but I still have to somehow do this, because running a script and then deleting it, doesn't do anything in my case, that's why I also suggested a possible solution and said that I didn't know how to write such a code… This is not my native language, I'm trying to explain what I want to here, do you understand what I saying? — Simon R., Jan 12 '21 at 13:58
imo you should just look into using media queries and not try split into mobile/desktop, you can invoke diff scripts by looking at .clientWidth like if a click event on a button does something different for mobile then desktop, though your find or you should aim to just use the same script for both and leave the design and layout to html and css — Lawrence Cherone, Jan 12 '21 at 14:05
@LawrenceCherone Fo example: I have a custom cursor on my site, it consists of HTML-elements and of an external script, that manipulates theses elements, I wrote a short script, that checks if there is a cursor, or not and I wanted that script to delete all the custom-cursor stuff from the html-file, when there is no mouse connected to the device, that loaded the website, but yeah, maybe I can do this with media-queries… I'm looking into it, thank you! — Simon R., Jan 12 '21 at 14:14

score 1 · Answer 1 · answered Jan 12 '21 at 14:13

I think DOMContentLoaded is what you are looking for. This event fires when the initial HTML document has been completely loaded.

<script>
  var device = "desktop"; // This could be either: "desktop", or: "mobile"

  document.addEventListener("DOMContentLoaded", function(event) {
    if(device === "desktop")
      document.querySelector(".mobile_only").remove(); // Not doing anything.
    else
      document.querySelector(".desktop_only").remove(); // Not doing anything.
  });
</script>

<section class="desktop_only">
    <script src="example.js"></script>
    <script> console.log("desktop_only") </script>
    <div> desktop </div>
</section>

<section class="mobile_only">
    <script src="example.js"></script>
    <script> console.log("mobile_only") </script>
    <div> mobile (Delete this.) </div>
</section>

Thank you for your answer! This is pretty cool and I didn't know about this. It's ALMOST what I need, in your code, this: `console.log("mobile_only")` still happens but that should not happen. I think I just have to find a completely different way of doing this… — Simon R., Jan 12 '21 at 14:22

score 0 · Answer 2 · answered Jan 12 '21 at 15:21

You can change display property of that divs to hide them. Do this in the mobile or desktop functions, and call them, depending on window.innerWidth

<div class="mobileonly">
    mobile
</div>
<div class="desktoponly">
    desktop
</div>
<script>
    var mobileDiv = document.querySelector(".mobileonly")
    var desktopDiv = document.querySelector(".desktoponly")

    function mobile() {
        console.log("mobile");
        mobileDiv.style.display = "block"
        desktopDiv.style.display = "none"
    }

    function desktop() {
        console.log("desktop");
        mobileDiv.style.display = "none"
        desktopDiv.style.display = "block"
    }
    let deviceWidth = window.innerWidth
    if (deviceWidth > 800) {
        desktop()
    } else {
        mobile()
    }
</script>

It's really not about viewport-size, it's stuff like: scripts that track mouse-position that should just not run on mobile devices and it it's more that just one script and I don't want to combine them in one file, because I feel it would be unnecessarily complex, I already solved it and Im posting my answer now, but Thank You, very much, for you answer! — Simon R., Jan 12 '21 at 15:29

score 0 · Answer 3 · answered Jan 12 '21 at 15:30

This is what I ended up doing:

In the <head> of my HTML, there is a little script that checks if something like a mouse is connected to the device, if there is: userOnMobile = false, if not: userOnMobile = true.

All the external scripts that are linked to the HTML and that should only run on desktop, or mobile, first check the userOnMobile-variable and then do their thing, or do nothing.

Thanks to Everybody for the input! :) – Simon

load HTML into

3 Answers3