3

within a website I'm writing the content of a dynamically added iframe with JavaScript. After adding the content to the iframe the JavaScript in the iframe will be executed. Unfortunately there are differences in IE. IE (8-11) will execute inline JavaScript first, before executing external scripts even if they are before the internal scripts. This is very strange since the normal process is, that JavaScript will be loaded synchronously step by step.

Example:

My webpage:

<!DOCTYPE html SYSTEM "about:legacy-compat">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=8" />
        <meta charset="UTF-8">
        <title>
            TEST
        </title>
    </head>
    <body>
        <iframe name="testFrame" frameborder="0"></iframe>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var $iframe = $("iframe");

                // Data
                var data = "<!doctype html><html><head>";
                data += '<scrip'+'t type="text/javascript" src="test1.js"><'+'/script>';
                data += '<scrip'+'t type="text/javascript">console.log("Inline");<'+'/script>';
                data += "</head><body>TEST</body></html>";

                // Write in frame
                var dstFrame = $iframe[0];
                var dstDoc = dstFrame.contentDocument || dstFrame.contentWindow.document;
                dstDoc.write(data);
                dstDoc.close();
            });
        </script>
    </body>
</html>

test1.js will just log a example status to see what kind of log will be executed firstly:

console.log("EXTERNAL");

In Firefox the console will be:

"EXTERNAL" test1.js:1
"Inline" test.html:1
"EXTERNAL" test1.js:1
"Inline" test.html:1

In IE the console will be:

EXTERNAL
Inline
Inline
EXTERNAL

As you can see the inline content will be executed before the external even if the external was added to the iframe before!

Can somebody tell me why and how to avoid it?

Notice: You can ignore the first two console logs since the parser will log the JavaScript even if it is inside a string (in my example it is inside the string).

user3631654
  • 1,735
  • 6
  • 22
  • 38
  • I only see the `console.log()` output once. [jsfiddle](http://jsfiddle.net/yvu627bk/) - also IE8 doesn't have the global `console` object. – Pointy Dec 10 '14 at 22:03
  • 1
    IE8 does indeed have a `console` object, [but only if you have the DevTools open](http://stackoverflow.com/questions/690251/what-happened-to-console-log-in-ie8). – Heretic Monkey Dec 10 '14 at 22:30
  • @Pointy which `console.log()` output do you mean? – user3631654 Dec 11 '14 at 08:04
  • @user3631654 In that [jsfiddle I linked](http://jsfiddle.net/yvu627bk/), I used your code, and when the page runs there are 2 and only 2 `console.log()` messages. First comes "EXTERNAL" and then "Internal". – Pointy Dec 11 '14 at 14:23
  • @MikeMcCaughan well the funny thing is that the reason I wrote that was because I saw, in the IE developer console, an error about `console` being undefined. – Pointy Dec 11 '14 at 14:24
  • @MikeMcCaughan ah - it's possible that the problem is that in jsfiddle, the "page" under examination is actually in an ` – Pointy Dec 11 '14 at 14:41
  • @Pointy yes you have to test it in a seperate local file, not on JSFiddle. The problem is unsolved but my workaround - until a better solution is found here - is to put all internal JavaScripts also into a external file since the external files will be loaded in the correct order. – user3631654 Dec 12 '14 at 14:51

0 Answers0