2

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.

Billy Moon
  • 57,113
  • 24
  • 136
  • 237

2 Answers2

0

Sure you can. Have you tried? Hints:

$('body').load( url,[data],[callback] );
Luca Matteis
  • 29,161
  • 19
  • 114
  • 169
  • I was just trying something along those lines, (`$("html").html(loadedData)`) but there are a few caveats, like the DOCTYPE declaration is not changed, and although it seems to change the title in my browser, I am not sure if it would change in all browsers, and the javascript DOM is not purged etc... any advice on how to get around these issues, and others I have not thought of/come to yet? – Billy Moon Jun 29 '12 at 12:20
  • I want it to take the title of the new page, but I want it to work on all browsers – Billy Moon Jun 29 '12 at 12:26
  • 1
    Can't you programmatically set the new title using `$('title').text('foo')` ? – Luca Matteis Jun 29 '12 at 12:27
  • @BillyMoon I think your requested page will work fine in all browsers if you remove the , and tags. and set the new title programmatically. use only other tags – Talha Jun 29 '12 at 12:34
0

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

Community
  • 1
  • 1
Cranio
  • 9,647
  • 4
  • 35
  • 55
  • Well that is a whole new problem I had not considered. All the testing I have done so far included the javascript in the head. Although changing the doctype is not currently necessary for me, I would like a general solution if it exists. I definitely need to replace the head and have new scripts executed, and I would like the DOM to be reset (or as close to as possible) – Billy Moon Jun 29 '12 at 12:31
  • @BillyMoon : Yes, I felt the solutions addressed only the HTML part, when it's widely known that AJAX-loaded scripts won't work and this is a serious thing to consider for a general approach. So one solution is putting all the JS login in the "calling" page, the other is do those fancy `eval()` tricks. – Cranio Jun 29 '12 at 13:00