JavaScript doesn't execute in Safari when loading entire page via jQuery's load() method

Question

I have these two pages:

page1.html

http://vidasp.net/tinydemos/jquery-load-issue/page1.html

<!DOCTYPE html>

<html>
<body>
    <div id="wrap"> </div>

    <script src="jquery.js"></script>
    <script> $(function() { $('#wrap').load('page2.html'); }); </script>
</body>
</html>

page2.html

http://vidasp.net/tinydemos/jquery-load-issue/page2.html

<!DOCTYPE html>

<html>
<head>
    <script> alert('Page 2 HEAD'); </script>
</head>
<body>
    <p> PAGE 2 </p>
    <script> alert('Page 2 BODY'); </script>
</body>
</html>

As you can see, I am loading the entire page2.html into the #wrap element of page1.html. Notice, that page2.html contains two SCRIPT elements with alert() function calls - one in the HEAD of the page, and the other one in the BODY of the page.

The issue:

In Firefox 3.9, IE9 beta, Chrome (latest) and Opera 11, both alerts execute. In Safari 5, only the second alert executes.

Is this a Safari bug?

There unfortunately just isn't consistent behavior between browsers when inserting a document into a document. I don't think you can call it a bug, because you're attempting invalid HTML, so the corrections (if any) are left up to the implementation. Are you willing to consider ugly solutions? — user113716
– user113716, Commented Jan 24, 2011 at 22:04
@patrick Well, the solution to this issue (obviously) is to put all SCRIPT elements inside the BODY of the document (where they belong anyway) :). — Šime Vidas
– Šime Vidas, Commented Jan 24, 2011 at 22:16
Yes, if you're able to alter the response server-side, then that (or more appropriately sending only the desired content) would be the obvious solution. — user113716
– user113716, Commented Jan 24, 2011 at 22:24

Šime Vidas · Accepted Answer · 2011-01-24 21:55:56Z

5

Seems like this is a Safari issue, but maybe not a bug (and may happen in other browsers):

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.

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

I'm guessing that applies to anytime .load() is used, not just when getting fragments. But I think it would be best, since you are pulling content into a <body> element that it not include a <head> tag?

edited Jan 24, 2011 at 21:55

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

answered Jan 24, 2011 at 21:54

Rob

7,8277 gold badges39 silver badges39 bronze badges

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

2 Comments

Šime Vidas Over a year ago

Great answer. One should either use an fragment identifier, like: load('page2.html #content'), or let page2.html be just a HTML snippet without the HEAD part of the document.

Prashanth Shyamprasad Over a year ago

helped me ur answer in finding solution for my question, thanks ... stackoverflow.com/questions/14687981/…

Collectives™ on Stack Overflow

JavaScript doesn't execute in Safari when loading entire page via jQuery's load() method

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related