Adding SCRIPTs to IFRAME via DOM, insertAdjacentHTML or document.write

Question

I need to add SCRIPTs into a sandboxed IFRAME and I'm trying to avoid using document.write (see here and here) but the DOM version is not executing the scripts in order. In the example below, jQuery hasn't loaded by the time the in-line script has executed, while the document.write version first loads jQuery then executes the in-line script.

For my purposes (ensuring that all leading libraries are loaded before running the in-line scripts, see here) document.write might be the correct approach (but DOM is better, just not working as it should), but I'd prefer to allow for async downloads if possible while ensuring that the script tags are executed in order.

I have a feeling that the DOM approach ensures order for srced SCRIPT tags, but not in-line ones... But if anyone can help me get a version that works with DOM executing the scripts in the expected order that'd be great!

Also... can anyone explain to me why the insertAdjacentHTML version doesn't function at all!?

<html>
    <head>
        <title>Testing DOM -vs- document.write Script additions...</title>
        <script>
            var $sandboxWin,
                $jQuery = document.createElement('script'),
                $script = document.createElement('script'),
                $head = document.head,
                sType = "insert"
            ;

            $head.insertAdjacentHTML('afterbegin', '<iframe id="neek" style="display:none;" sandbox="allow-scripts allow-same-origin"></iframe>');
            $sandboxWin = document.getElementById("neek").contentWindow;

            switch (sType) {
                case "dom": {
                    $jQuery.type = "text/javascript";
                    $jQuery.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js";
                    $sandboxWin.document.head.appendChild($jQuery);

                    $script.type = "text/javascript";
                    $script.text = "console.log('via appendChild:'); console.log($);"; //.innerHTML
                    $sandboxWin.document.head.appendChild($script);
                    break;
                }
                case "insert": {
                    $sandboxWin.document.head.insertAdjacentHTML('afterbegin', "<script src='jquery.min.js'><\/script>");
                    $sandboxWin.document.head.insertAdjacentHTML('afterbegin', "<script>console.log('via insertAdjacentHTML:'); console.log($);<\/script>");
                    break;
                }
                default : {
                    $sandboxWin.document.write(
                        "<script src='jquery.min.js'><\/script>" +
                        "<script>" + 
                            "console.log('via document.write:'); console.log($);" +
                        "<\/script>"
                    );
                    $sandboxWin.document.close();
                }
            }
        </script>
    </head>
    <body>
        Testing DOM -vs- document.write Script additions...
    </body>
</html>

Adding SCRIPTs to IFRAME via DOM, insertAdjacentHTML or document.write

0 Answers0

Linked