22

I'm using jQuery and trying to load the body from an external HTML file.

It works if I try to load some div:

$('body').load('example.html #content');

But I'm unable to do something like this:

$('body').load('example.html body');

Shikkediel
  • 5,195
  • 16
  • 45
  • 77
Diogo Cardoso
  • 21,637
  • 26
  • 100
  • 138
  • Hmm, according to the docs, it *should* work. – Pekka Mar 11 '11 at 09:51
  • 2
    No idea why it doesn't work but you could add an id to the body and treat it as per your working example. – Steve Claridge Mar 11 '11 at 09:57
  • 1
    This definitively doesn't work. It looks like one has to wrap body into another div and select it instead. – Mahn Aug 14 '12 at 21:49
  • According to [this comment](https://stackoverflow.com/questions/18854199#comment-33813522), this doesn't work because the body element is stripped before the selector is applied. You'd have to wrap the entire contents body in another tag, and then select that. – jpaugh Jun 08 '17 at 19:04
  • I tested this, and it works, so I added an [actual answer](https://stackoverflow.com/a/44444087/712526). – jpaugh Jun 08 '17 at 19:29

5 Answers5

9

From http://api.jquery.com/load

jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as <html>, <title>, or <head> elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.

Reading the above, it seems possible that your browser be only returning the body innerHTML. This obviously should be the same as requesting body, but maybe it's causing an error because body is not found?

I'd suggest trying a different browser.

George Phillips
  • 4,564
  • 27
  • 25
Adam Hopkinson
  • 28,281
  • 7
  • 65
  • 99
3

When you use load without a selector, it strips the <html>, <head>, and <body> tags, but leaves all of the children of <head> and <body> intact, including title, script, and style tags. However, when you use a selector, it is applied after the body tag is stripped, so it's impossible to match against it.

Instead, wrap all of your body content inside another tag, and select that tag instead:

<html><head><title>Hello!</title</head>
<body>
  <div id="jquery-load-point">
    ... <!-- rest of body content -->
  </div>
</body>
</html>

Now, you can load it like this:

$("#destination").load("http://my.url/to/page #jquery-load-point");
jpaugh
  • 6,634
  • 4
  • 38
  • 90
3

If you want to load the whole body, $('body').load('example.html'); should be enough.

If not, could you explain why ?

Anyway, the solution provided by Steve is the right one.

Réjôme
  • 1,474
  • 3
  • 16
  • 25
  • 2
    but would this contain HTML other than that in the body tag? (ie - meta, ``, etc) i dont know, im asking – jon_darkstar Mar 11 '11 at 10:13
  • 1
    I ran a few tests and I get no `` or `` tags. – Réjôme Mar 11 '11 at 10:31
  • 4
    It's not what Diogo is asking... jQuery is loading the COMPLETE page in your suggestion, but the content will be without the HTML, HEAD and BODY tags. Css and scripts from the HEAD will be put above the loaded body content. – 321X Jun 22 '11 at 06:41
  • I can confirm meta charset tags are being loaded when using this method, and they are placed above the body content as @321X said. – Mister Smith Mar 06 '13 at 12:00
2

I guess what you need is to add an iframe. Pass the URL to its src property. Your whole html will get loaded in this iframe then. A clean and simple solution for your problem. All the best :-)

webcoder
  • 311
  • 1
  • 8
  • That's a great solution, and probably the best *unless* the target page does not allow nesting in iframes. It's the original solution I was trying, since it doesn't require JavaScript at all. – jpaugh Jun 08 '17 at 19:33
  • thanks. And if the target page does not allow nesting. i.e. if CORS is disabled then none of other solutions here going to work. – webcoder Jul 09 '17 at 13:07
  • CORS has some overlap, but I'm actually thinking of the X-FRAME-OPTIONS header. ([Using jQuery magic](https://stackoverflow.com/a/5271470/712526) can solve that case. – jpaugh Jul 10 '17 at 16:45
1

Make sure you are using jQuery 1.5.1 and not 1.5. The load feature in 1.5 had issues. I answered a similar questions at jquery .load() doesn't work

Another thing is to try it in different browsers to make sure it's not a browser issue. Chrome doesn't allow you to use load when working from localhost without doing some tweaking.

Community
  • 1
  • 1
Hussein
  • 42,480
  • 25
  • 113
  • 143
  • The default behavior loads in lots of crap from within the `` element. Undoubtedly, this is to support loading external pages while preserving stylesheets and script behavior; however, it can potentially add a lot of visual noise to the page, too. – jpaugh Jun 08 '17 at 19:32