IE8 DOM无法反映JS更改

Question

I'm making some simple changes using javascript to HTML elements already existant when the page is served (such as changing background images of div elements, adding IDs etc). This of course works fine in every browser apart from IE8 where the change doesn't appear to be reflected in the DOM so when I parse the dom after the JS has run it cant find the elements I'm looking for. The page is built up of 2 javascript files in the header, 1 is an external third party script which I do not have control over but which is the one adding the ids and background images. The second is mine which is called after the first and is parsing the document looking for the specific elements with the new IDs. Both are external scripts and are not inline in the HTML source.

From what I can tell its either:

• a race condition, 2 external Javascripts are running 1 is changing the buttons and adding the ids and the other is parsing the dom looking for specific elements and as they're running at the same time the second never finds the elements
• IE8 does not properly refresh the DOM after changes have been made

My JS is called after the first JS in the head so you would assume that the blocking would not cause the race condition and the elements would be available before my JS runs

Things I've tried:

• I've tried adding a class to the body to force a refresh of the DOM before my code runs
• I've used IE8 developer tools and the ids and elements are not present, but if I refresh a few times they magically appear (the page has already fully loaded at the this point and I can interact with it fully)

Any ideas?

Thanks!

Answer 1

One thing to keep in mind is that when you are creating multiple <script> tags, you are not guaranteed of the order in which they load, and depending on how they are build - they will generally begin processing as soon as they are loaded.

So, if you are including one local file and one file to a CDN, such as:

<script type="text/javascript" 
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript" src="/js/my_script.js"></script>

You have to take into account that the CDN file is often far faster for delivery than your hosted file. In the above case, this may be a good thing - because jQuery being loaded on the page before your script is probably ideal - but if you are loading a different 3rd party script, which may rely on certain elements being present in the DOM that your script is responsible for creating, your script may not create them in time.

Imagine this scenario:

<script type="text/javascript" src="https://someurl/somelib.js">
    // This script parses the DOM and applies alterations to certain items
</script>
<script type="text/javascript" src="/js/my_script.js">
    // This script creates the DOM elements the other script is supposed to alter
</script>

Your page will only work if the local file, /js/my_script.js , loads first - which is unlikely because the other file is being served from a dedicated CDN.

This is even worse when both files are served locally, such as:

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

In this case, it all depends on how your local web server happens to handle the HTTP requests in order to determine what happens in what order.

So - on to the solution:

1) Make your scripts all wait for the document 's onready event to fire. Because this event only occurs once the document is fully loaded (including any other HTTP requests necessary to fully load its elements, such as scripts, images, etc.) - you can be guaranteed that the scripts will at least wait until the full DOM is loaded.

2) Make subordinate scripts wait for trigger events.

With jQuery, an example might be something like the following:

// Script #1
$(document).bind('ready', function () {
    $('#NeedsBackground').css({ background: 'url(/gfx/bg.png)' });

    var $wrapper = $('<div />').addClass('wrapper');
    $('#NeedsWrapper').wrap($wrapper);

    // Here's the magic that enforces loading.
    $(document).trigger('Script1Finished');
});

// Script #2
$(document).bind('Script1Finished', function () {
    $('.wrapper').css({ border: '1px solid #000' });
});

Now - bear in mind that the above transformations are fairly terrible, and not something you'd want to do (such as inlining CSS and such, generally) - but they give an example. Because Script #2 requires that the .wrapper elements exist before running, you need to ensure that it happens AFTER Script #1 occurs.

In this case, we're accomplishing that by trigger ing a custom event on the document, which we can then respond to - and we are only firing that event after the DOM has been put in the proper state.