Loaded html not fetching javascript files

Question

I have a html page which dynamically loads the contents of another html file into a div.

function loadHTML(url, id) {
    req = new XMLHttpRequest();
    req.open('GET', url);
    req.send();
    req.onload = () => {
        console.log(req.responseText);
        document.getElementById(id).innerHTML = req.responseText;
    }
}

I call loadHTML("/lib/header/header.html","header") which loads the contents of /lib/header/header.html into the div in the main html <div id="header"></div>

/lib/header/header.html

<script src="/lib/header/header.js"></script>
<link href="/lib/header/header.css" rel="stylesheet">
<header>
    <object id="logo" data="/lib/global/Icon.svg"></object>
    <span id="auth">
        <span class="pair" id="login">
            <p>Login</p>
        </span>
        <span class="pair" id="register">
            <p>Register</p>
        </span>
    </span>
</header>

as you can see, the header.html file also includes a header.css and header.js file. The header.css file gets correctly loaded but the header.js file doesn't.

It's not even listed in the "Network" tab of Chrome developer tools.

I am completely clueless as to why this is happening.

Thanks in advance.

Scripts won't execute when added to the document via `.innerHTML`. Is there a reason why you can't include `` in the main file and then remove it from "header.html"? — Scott Marcus, Sep 15 '17 at 22:03
@ScottMarcus yes there is a reason: I have multiple components and only want to load their respective scripts if they are actually displayed, not prefetch all existing scripts — Philipp Hemmelmayr, Sep 15 '17 at 22:32
@Legends I have opted for the $.getScript variant for now, it's kinda a pain to debug tho as the script won't show up in the sources tab of chrome — Philipp Hemmelmayr, Sep 15 '17 at 22:35
You can use the `load` method of jQuery to insert HTML and execute the contained script. http://api.jquery.com/load/ — Legends, Sep 15 '17 at 22:55

Loaded html not fetching javascript files

0 Answers0