Question

这可能不太可能，但值得一提。我正在动态地将脚本标记插入到我页面的head部分中。目前我正在使用document.write你们许多人都会皱眉头，但它确实做得很好。

但是，由于here概述的原因，我想找到document.write的替代方案。

因此，我需要一个能够做到这一点的功能：

<!-- The document.write writes the new script here synchronously so it will block other scripts -->

<script type="text/javascript">
    // Code here that uses the code from the dynamically inserted script
</script>

任何人都可以使用jQuery或普通javascript建议在页面上插入元素，但也符合这些要求：

将元素放置在调用函数的位置。例如脚本标记放在调用它的脚本标记之后
脚本会同步加载，因此会阻止其他脚本直到完成

Google使用Google.load()方法执行此操作，是否使用document.write？当然不是......

Answer 1

你可以看一下这篇文章 - http://www.phpied.com/non-onload-blocking-async-js/ Facebook使用类似的脚本异步加载SDK。

它是跨浏览器的，即使页面上的html无效，也可以异步加载脚本（即使缺少head / body标签）。

这是一个直接来自facebook的SDK的例子：

  (function(d, debug){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
     ref.parentNode.insertBefore(js, ref);
   }(document, /*debug*/ false));

您必须进行一些修改，因为它允许您一次加载脚本（因为if (d.getElementById(id)) {return;}）。

如果我们仔细观察脚本，我们可以看到许多好处：

在您的页面上，您必须拥有script标记（因为异步加载的脚本），这就是为什么它获取第一个脚本元素
查找已添加的SDK
它创建具有指定标识
设置脚本的src
它将脚本元素插入特定位置
它以异步方式加载脚本，以防止页面阻塞
自调用函数为文档对象创建短别名。这使脚本更紧凑。

Answer 2

你可以采用不同的方式。正如各种答案中提到的Link。但我使用以下

var load_js = function(data, callback)
            {
                    var head = document.getElementsByTagName("head")[0];

                    var script = document.createElement("script");
                    script.type = "text/javascript";
                    script.src = data;
                    head.appendChild(script);

                    if(callback != undefined)
                            callback();
            }

            load_js("http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js");

不使用document.write插入head标签中的特定位置

2 个答案: