1

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

但是，出于此处概述的原因，我想找到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 将在页面上插入元素的东西，但也符合这些要求：

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

谷歌用他们的Google.load()方法做到这一点，他们使用 document.write 吗？肯定不是...

4

2 回答 2

2

您可以查看这篇文章 - 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
  • 它创建具有指定 id 的新脚本元素
  • 它设置脚本的src
  • 它在特定位置插入脚本元素
  • 它异步加载脚本，以防止页面阻塞
  • 自调用函数为文档对象创建短别名。这使脚本更加紧凑​​。
于 2012-11-22T12:42:23.200 回答
2

你可以用不同的方式来做。正如链接中的各种答案所述。但我使用以下

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");
于 2012-11-22T12:42:36.490 回答