Netscape Javascript Bug

Just when you had your fill of bugs and workarounds to get stuff to work with both NN and IE, I recently uncovered a bug that happens in both NN3 and NN4 when using frames and image rollovers.

If you've ever read through JavaScript documentation at Netscape you may have noticed that there are some words that are reserved. Usually, when using these words your scripts will fail miserably, leaving you to figure out what the heck is going on. However, as I discovered recently, these problems can sometimes be painful to locate.

I was putting together a quick demo site for some product that my girlfriend was showcasing to some dealers in her career field; a gallery of sorts. This gallery was a lot like other galleries on the net, complete with frames, explanatory title in the top frame, content in the middle frame complete with rollovers, and previous and next buttons in the lower frame.

Since I would be using JavaScript in the lower frame along with the traditional target attribute for a normal link, I made sure I'd labeled each frame with an appropriate name. I tested this whole thing out in IE5 and was quite pleased with myself. I'd knocked out picture taking, design, layout, coding, and testing in about 2.5 hours. It was late so I put it away for the night. The next morning, however, when I had my girlfriend test it out before sending this dealer the URL, she complained that it didn't work. I cranked up Netscape immediately to find out what was wrong.

The first couple of clicks on the next button would work fine until I put my mouse on the rollover in the content frame and then no amount of clicking next or previous would take me anywhere. I also had a normal link in the bottom frame with a target value of content, that when clicked would open a new window with the document referenced in the link, instead of opening the document in the content frame. I opened up the JavaScript console to find a long list of errors, all the same.

JavaScript Error: http://000.000.000.000/bottom.html, line 43:
parent.content has no properties.

I'd encountered this once before, but I couldn't remember where or what had caused it. I couldn't remember what had caused it before because I never figured it out; until now. Using Netscape, I investigated a little bit further to find out what the problem was. I already knew that as long as I just hit the previous or next links, everything was fine. It wasn't until I initiated the rollover in the content frame that the errors started happening. It was easy to conclude that everything was fine with my previous and next functions and that the problem was elsewhere.

To begin with, I reloaded the frameset page, resetting it to the original top, middle, and bottom documents. Then, I hit CTRL+O to bring up the Open File dialogue box. I type in

JavaScript:alert(parent.frames[1].name)

(Remember, I can't use the NAME of the middle frame because it might throw errors, just like the previous and next functions were already doing, so I had to refer to the frame by it's index.) and hit OK to find out what the name of the second frame is. An alert box pops up saying content, just like I had specified in the frameset document. I click next and hit CTRL+O, the JavaScript statement I had just typed in there last time was still there so I hit OK. The alert box told me the same thing. So, I hit next again. This time, however, instead of hitting CTRL+O, I moused over the rollover in the content frame. It was time to find out what was happening. I hit CTRL+O and then OK and this time the alert box said diaspore_3. That was really odd because that was the value of the name attribute of my rollover in the content frame, not the name of the middle frame as defined in the frameset page.

I realized that something in my rollover code in the document's that were loaded into the content frame were causing this to happen. When I looked at it carefully, I found the nasty culprit immediately. I had forgotten that you cannot use reserved names as variables. I was using the variable name as one of my variables. Netscape was inadvertantly renaming the middle frame with the value of this variable. What a nightmare. I did a quick site wide search-and-replace, changing this variable's name to something else and everything was just fine.

So, let this be a lesson to all of you out there. When the documentation says not to use certain words because they're reserved, please do it or bad things will happen.