Question

我需要将SCRIPT添加到沙盒IFRAME中，并且我试图避免使用document.write（请参阅here和here），但DOM版本没有执行脚本为了。在下面的示例中，在内联脚本执行时，jQuery尚未加载，而document.write版本首先加载jQuery，然后执行内联脚本。

出于我的目的（确保在运行内联脚本之前加载所有前导库，请参阅here）document.write可能是正确的方法（但DOM更好，只是没有工作，因为它应该），但我希望尽可能允许异步下载，同时确保按顺序执行脚本标记。

我觉得DOM方法可以确保src ed SCRIPT标签的顺序，但不能保证内联的标签...但是如果有人可以帮助我获得一个适用于DOM的版本，那么执行脚本就可以了预期的顺序很棒！

另外......任何人都可以向我解释为什么insertAdjacentHTML版本根本不起作用！？

<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>

通过DOM，insertAdjacentHTML或document.write将SCRIPT添加到IFRAME

0 个答案: