依赖关系问题动态加载JavaScript

Question

我正在实现一个脚本，以防止第三方插件设置cookie，为此，我的HTML页面将返回所有具有“文本/纯文本”类型的脚本，以使浏览器最初不会对其进行解释。

随后，唯一类型为“ text / javascript”的脚本将采用所有这些“已停用”的脚本，并用其“ text / javascript”变体替换它们：

        var scripts = document.getElementsByTagName('script');

        for (var i = 0; i < scripts.length; i++) {
            if (script.getAttribute('type') == 'text/plain') {
                var new_script = document.createElement('script');

                new_script.setAttribute('src', script.getAttribute('src'));
                new_script.setAttribute('type', 'text/javascript');

                script.parentNode.replaceChild(new_script, script);
            }
        }

这可行。 脚本已执行，但是存在依赖性问题。 例如，使用jQuery的脚本无法找到它，而且jQuery脚本标签是页面的第一页。 似乎脚本是一次全部加载的，而不是等待诸如DOM ready和DOM load之类的事件。 如何重置这些事件？

Answer 1

您不应为脚本标签指定src 。 如果浏览器遇到带有set src脚本标签，它将立即加载它。 为避免此问题，您可以将脚本的url保留在data属性中，例如data-src然后再使用该属性中的url创建真实的脚本标签。 您的初始脚本标签可能看起来与此相似：

<script type="text/plain" data-src="load-later.js"></script>

之后，您可以像这样“激活”这些脚本标签：

var scripts = document.getElementsByTagName('script');

for (var i = 0; i < scripts.length; i++) {
  var script = scripts[i];
  var scriptSource = script.getAttribute('data-src');
  if (script.getAttribute('type') === 'text/plain' && scriptSource) {
    var new_script = document.createElement('script');

    new_script.setAttribute('src', scriptSource);
    new_script.setAttribute('type', 'text/javascript');

    script.parentNode.replaceChild(new_script, script);
  }
} 

这里是普拉克证明了这种方法。