Question

I want to have a simple HTML file act as a bootstrap for a second HTML file (which will be loaded using AJAX, then processed with javascript), which would replace the first entirely.

bootstrap.htm

1. loads content.htm using AJAX (jQuery fine for this job)
2. modifies content using javascript (various custom filters/modifications required)
3. replaces itself with newly modified content

I expect it might not be 100% possible, as replacing the doctype might be hard, but I expect it is not too hard to replace all the body content, and all the head content (maybe just all the content of HTML?)

Does anyone have any advice on how to go about this?

EDIT: I tried to directly do what I really want…

$.get("content.htm", function(d) {
  console.log(d);
  return $(document).html(d);

But this does not work, and leaves me with an empty document
});

EDIT: Best solution so far (still conceptual)

• bootstrap.htm loads, and is very careful only to create one global variable (lets saybs)
• bootstrap.htm then loads the content.htm file, and processes it further
• bootstrap.htm replaces the html tag content with the contents of the processed content.htm‘s html tag
• bootstrap.htm then searches the new content, and executes any inline javascript, being careful not to execute code that has already been executed
• bootstrap.htm removes it’s global variable (although there is little point at this stage, when most of the imported code has already been run)

This still does not allow the DOCTYPE to be changed, and the executing of imported code seems a bit unreliable, but this is the best idea I have so far.

Answer 1

I think that the main caveat would be for JavaScript code that is not executed. If you are loading “pure” HTML, I think the methods suggested by the other user (and that you foresaw) will be fine, providing that docype and HEAD will not be changed.

See also: Calling a JavaScript function returned from an Ajax response