IE JavaScript woes

October 19, 2008 12:28 PM

I'm trying to come up with a generalized comic viewer using just JavaScript. I have a solution that works in nearly all browsers, but fails miserably in Internet Explorer (several versions). I don't have easy access to a Windows machine, and wonder if anyone could help me figure out what I'm doing wrong (specifically for IE).

The main site is at: http://jamesburnsdesign.com/comics/gwg.html

The JS file is at: http://jamesburnsdesign.com/comics/comicScript.js

I'm sure I'm just doing something stupid, and would appreciate any insights the hive mind could share with me...

Thanks in advance.

posted by jpburns to computers & internet (7 comments total)

The problem is a whole bunch of race conditions. What you're doing now is defining some functions in comicScript.js and then calling them inline in gwg.html. The problem is that as IE scans down the page it is executing these functions right away, or attempting to, rather, regardless of whether comicScript.js has actually been downloaded and interpreted yet.

It looks like Firefox and Safari are doing you a favor by enforcing execution in order of mention, download the file first because you use its script tag first, but this isn't by any means guaranteed. IE adopts the (also reasonable) method of just executing the current page first before pulling in external resources.

You have a few choices in resolving this:

First, and easiest, but arguably less professional is to just put the contents of comicScript.js inline in the html document at the appropriate place, which ensures the functions will always be defined at the proper time in either interpretation scheme.

Second, which requires some minor changes to your code but which provides a cleaner base on which to expand the script, if that's a concern:

1. Ditch document.write. To put things into the document use something like, to pick the (useless-looking, but that's another issue) copyright function as an example:
   
   function copyright(){
var copyright="<p class='copyright'>Copyright © 2008 by James Burns, All rights reserved.</p>";
document.write (copyright);
   
   InnerHTML (easier)
   function copyright(){
document.getElementByID('copyright').innerHTML='blah blah James Burns etc';
}
   
   or DOM (better)
   function copyright(){
document.getElementByID('copyright').appendChild(document.createTextNode('blah blah James Burns etc';
}
   
   Both of these require you to add <p id="copyright" /> (it should be an ID and not a class anyway since there's only one) in your document to place the text in the appropriate place, because ...


2. Call the methods in a central location (the window.onload event) rather than at the spot in the page where their output would go with document.write()
   
   All of the inline JavaScript you have in the html file now would become something like:
   
   window.onload = function() {
checkIt(); /* Note: give me a better name plz */
headerTitle();
/* etc... */
copyright();
}

posted by moift at 1:47 PM on October 19, 2008 [2 favorites has favorites]

Great suggestions. I had no idea that IE loaded differently. What a pain.

Doing it on the "onload' makes the most sense. Thanks.

Tough to try to figure out comicbook writing, drawing, inking, and also be halfway competent at JavaScript. And that's about how good I am at it.

So, what would you call a function that checks something?

Thanks again...
posted by jpburns at 3:07 PM on October 19, 2008

check[Whatever it checks]()

Fill in [Whatever it checks] as appropriate.
posted by zixyer at 5:25 PM on October 19, 2008

By the way (for those following at home), it should be:

document.getElementById()

(Note the lower final "d" in "Id")

I spent hours trying to get this to work yesterday, only to figure that out today...
posted by jpburns at 5:29 AM on October 20, 2008

I should have some kind of script that checks for that everytime a script doesn't work - my fingers seem to be incapable of typing it right and my eyes seem incapable of spotting it.
posted by Artw at 3:33 PM on October 20, 2008

Just for people running across this post, looking for a similar answer for their own problems; an update:

The big problem was that Internet Explorer apparently will try to call inline functions before all external files are totally read in. Bastard!

Anyway, the suggestion was to call all the stuff using the window.onload, to guarantee that all external files were read.

That solution still won't work with IE. There's something seriously hosed in the implementation of window.onload in IE...

For one thing... If you do it this way:

window.onload()=init;

It complains about not knowing what init is. If you do it this way:

window.onload = function(){
checkIt();
headerTitle(page);
getPage(page);
copyright();
}


Then it complains about "checkIt() is not an object." That makes me think it's still not waiting for the external JavaScript file to load before attempting to fire off the functions described therein.

Sheesh!
posted by jpburns at 1:53 PM on October 21, 2008

Here's hopefully my last update.

moift flagged the fact that I had (accidentally) used "application/javascript" when I meant to use "text/javascript" when loading the external javascript.

Fixing this fixed my problem. My original file (with the original inline javascript, document.write(), and relying on sequential execution order) now works fine!

Go figure...
posted by jpburns at 1:13 PM on October 22, 2008