getElementById from parent works for Firefox not for IE

Question

I am trying to access an element in my Edge Animate animation (which is a menu bar) from the parent document. The element has an onClick event which is triggered depending on the #bookmark in the URL of the parent web page. My code works perfectly in Firefox but does not work in Internet Explorer(10). IE is unable to see any elements within the 'Stage' div whereas Firefox can.

This is the JavaScript code on my parent page: -

<script language='javascript'>

      var thisPage = window.location.pathname;
      var fullurl = document.URL;
      var xxx = fullurl.substring(fullurl.indexOf('#'));
      var pageString = xxx.replace("#", "");
      pageString = pageString.replace("http://www.mydomain.com/portfolio/photography.html", "");

      if (pageString == "corporate") {
            window.onload = function()  {  
            var iframe = document.getElementById('U10511_animation');
            var innerDoc = (iframe.contentDocument) ? 
            iframe.contentDocument : iframe.contentWindow.document;

            var corporateRectangle = innerDoc.getElementById('Stage_Corporate_Rectangle');
            corporateRectangle.click();   
      }   
};

</script>

The above code will select the Corporate tab in the menu when viewed in Firefox but not IE when the URL has the suffix #corporate.

When I insert an 'alert' for the variable 'corporateRectangle' in Firefox it returns [HTMLObj] and in IE it returns 'null'.

Any ideas anyone? Thanks.

Answer 1

Ok... thanks to everyone who left suggestions.

The issue was that the menu animation has a preloader. Firefox ignores the preloader whereas IE treats the preloader as onLoad being complete. Therefore the attempt to access the element ID is null as it hasn't been loaded yet.

I decided to approach the problem from a different tack and read my bookmark from within the animation. This turned out to be a very simple solution once I figured out that I had to put the code in the first frame of the animation NOT in creationComplete or compositionReady.

This was the code: -

var bookmark = parent.window.location.hash;
bookmark = bookmark.replace("#", "");
if (bookmark == "corporate") {
    sym.play("corp");
}

yes, as simple as that.

Answer 2

Have you tried checking the console for an error of some sort to help you and us understand the error?

Answer 3

IE JavaScript often works differently than in other browsers. And iframes are particularly problematical. One possibility is that you are getting the wrong document, such that the documentyou are retrieving either does not exist or does not contain the element you are looking for. So you just have to do some debugging. Here is how I would proceed. Run your script in IE.

1) Determine whether innerDoc is iframe.contentDocument or iframe.contentWindow.document. Make sure innerDoc is not null. If it is, try to get the document a different way.

2) Assuming innerDoc is not null, enumerate all of the elements in innerDoc. You can do that as follows:

for(i = 0; i < innerDoc.all.length; i++) alert(innerDoc.all [i].id);

Make sure that the id you are looking for is actually in the document. I suspect it isn't and that you need to get a different document object under IE.

I assume you are stuck with having to use iframes. If not, I suggest you use a different approach as iframes can be very problematical and browser-specific in how they work.

Answer 4

internet Explorer gets confused over name and id - it is highly recommended to treat these two attributes as if they were the same.

You can fix it either by 1) ensure that there are no id/name conflicts in your document, or 2) override IE's native getElementById-method.

Read more about it here.