While trying to implement my CodeDodger loader script, (a fresh look at dynamic DOM injection for script and link tags using DocumentFragment) I noticed the JavaScript and CSS was not processed in IE. I did a lot of research and testing just to find out that IE does not treat an appended DocumentFragment the same as an appended element.
When comparing my script to that of a simpler script to load css/js dynamically on Dynamic Drive, I found virtually no difference in methodology except DocumentFragment. I still tested every possible way to construct the link/style tag but all had the same results. Strangely, the IE developer tool reports the DOM was modified successfully:
Even though the new DOM nodes appear correctly, the browser never processed associated files. Even stranger, the IE dev tool finds the JavaScript files and I can run the code in the console referencing the included files:
This caused me to wonder about the timing of my scripts in IE (of course, all other browsers work just fine). I tried wrapping my evocations (built dynamically in the page with PHP) inside a jQuery document.ready call and proceeded that function with:
if (typeof jQuery === 'undefined') { alert('break') ; } |
IE always alerted “break” despite the files loading from cache and having several milliseconds to process before the page completely rendered. So, I tried another trick and wrapped my invocation inside
setTimeout(function(){ //put evocation here ,0); |
That actually worked. My page included and processed the new JS files then executed the evocation on a “ready” DOM (it has something to do with the difference between document.ready and pageLoad and IE being IE).
I found no such work-around for the CSS files. So, if I want to keep CodeDodger geared toward high-performance, I will need to detect for IE and skip the fragment to insert the CSS link tag directly into the DOM. I know this will perform slower and could cause blocking but I don’t think I have a choice–thanks IE.
What’s happening is that IE is treating the contents of the script and style tags as text nodes instead of interpreting them. I’ve run into this problem before but haven’t gotten around to writing a cross-browser fix for it yet.
You will have better luck if you get read the text nodes from the script tags, build a new script element, then add the text node value to the new element. When you append the new element do the dom, it will execute.
@Charles,
I agree, the next step is to grab the file via AJAX and fill a new script tag. I just want to make sure it pulls the file from cache when possible, so I’ll do a followup post to report whether or not that method still uses the browser’s cache appropriately.
Thanks,
Paul