JS loading external HTML that should load the HTML's assets (CSS and JS)

Question

I've written the snippet below to send an HTTP request to get an HTML file. The HTML file has CSS and JS included (link and script tags):

var request = new XMLHttpRequest();
request.open('GET', 'form.html', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    var resp = request.responseText;

    this.innerHTML = resp;
  } else {

  }
};

request.onerror = function() {

};

request.send();

The above snippet sends a request and gets the HTML. However, it's having problems putting the HTML into the DOM and it's not sending requests to fetch the styles and javascript. How can I do the above and take the response HTML, put it into the page, and have it send the requests to get the various assets?

CupawnTae · Accepted Answer · 2015-08-31 16:00:35Z

1

In your onload handler, this refers to the request object, not the document, so setting the innerHTML property won't do anything useful. You need to tell it where to put the new HTML, e.g.

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    var resp = request.responseText;

    document.documentElement.innerHTML=resp;
  } else {

  }
}

(Note this won't work in early IE versions)

answered Aug 31, 2015 at 16:00

CupawnTae

14.7k3 gold badges31 silver badges62 bronze badges

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

10 Comments

Noah Over a year ago

That's working now, but the JS still isn't coming in.

Noah Over a year ago

The JS inside of form.html isn't being loaded.

CupawnTae Over a year ago

You mean inline script is not being executed? Yeah, that won't work - perhaps one of the answers to this question would work for you? stackoverflow.com/questions/2592092/…

Noah Over a year ago

Yeah form.html has a bunch of <script src="file.js"></script> in it.

Noah Over a year ago

Not inline. I used the snippet from that answer, and it's running the inline now. But I ALSO need to make sure it sends the request to get the JS from the <script> tags

|

Collectives™ on Stack Overflow

JS loading external HTML that should load the HTML's assets (CSS and JS)

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related