Wednesday, June 13, 2007 2:26 AM InfinitiesLoop

Beware of the greedy Script element

I've seen this problem a few times now, from a few different developers... including myself. I figure it must have plagued someone else out there too, so hopefully if you read this, if you ever encounter this problem, it wont cost you hours.

It's a hell of a problem to track down because when you run into it, it causes really strange errors. Your entire page seems to fall off the edge of a cliff. That isn't far from the truth. But you could spend hours looking at the HTML and see nothing wrong with it!

Try this -- copy this into a static HTML file and open it in IE:

<html>
 <head>
  <title>Greedy!</title>
 </head>
 <body>
 <script type="text/javascript" src="somescript.js" /> 

     Hi!!!!!!!!!!
 </body>
</html>

What do you get? This...
Hmmmm, that's funny....

Hmmmm, that's funny. Yes, I added the question mark. Not bad for free form. But notice you don't see the "Hi!!!" part.... if you still don't know why that is, I challenge you to figure it out before reading on.

 

... answer below ...

 

 

 

 

 

 

 

 

If this were a real page, the results would be pretty much the same, no matter what or how much content was on it. A blank page. You might even get some javascript errors thrown in too. Errors like "object expected", for an object you know for sure exists.

The problem is that the <Script> element cannot be self closing. It's interpreted as having no closing tag, and so all of the content after the script element is inside the script element -- and therefore does not appear in the visible output. It also makes dom elements that you'd normally expect to be around non-existent, which can cause errors in any script that does happen to load. So you might get a javascript error, followed by the blank page, and then assume the javascript is somehow causing the page to bomb.

Change your script tag like so, and problem solved:

<script type="text/javascript" src="somescript.js" ></script>

Appears to only be an IE thing -- works fine in FF, Safari (including for Safari Windows), and Opera.

Filed under: , , ,

Comments

# re: Beware of the greedy Script element

Wednesday, June 13, 2007 11:12 AM by Bertrand Le Roy

Yes, it's about time IE would start supporting XHTML...

# re: Beware of the greedy Script element

Wednesday, June 13, 2007 12:57 PM by John S.

This issue has caught me several times and I never seem to remember what the fix is. Thanks for another reminder.

# re: Beware of the greedy Script element

Friday, June 22, 2007 6:31 PM by Matt Berseth

Thanks for the info - I spent an hour the other night trying to trouble shoot a problem - turns out this was the issue ...

# re: Beware of the greedy Script element

Wednesday, August 22, 2007 5:18 AM by Latifa

I win the challenge... i discovered it immediately, pretty obvious:D

Thats the plus of being a "begginer" :P

# re: Beware of the greedy Script element

Thursday, August 23, 2007 9:59 AM by fm

Same things happens in IE with the <object> tag, too.

# re: Beware of the greedy Script element

Thursday, August 30, 2007 4:27 AM by Neil Chen

<div> tag behaviours exactly the same as this one.

# re: Beware of the greedy Script element

Thursday, September 27, 2007 11:07 AM by partha

how did you add the ?

# re: Beware of the greedy Script element

Thursday, September 27, 2007 12:29 PM by InfinitiesLoop

partha -- with the snippet tool that comes with VS. Follow the link 'added' right under it.

# re: Beware of the greedy Script element

Thursday, September 27, 2007 1:22 PM by partha

Yes - I saw that.

But how did you get it on the web page? I don't see any code in the web page for that.

# re: Beware of the greedy Script element

Thursday, September 27, 2007 1:46 PM by InfinitiesLoop

It's not in the webpage... I took a screenshot with the snippet tool and added the question mark. :)

# re: Beware of the greedy Script element

Tuesday, June 10, 2008 9:06 PM by James

AHHH This thing has caused me to pull almost ALL of my hair out!! haha at least now I know what the problem was!