Question

我正在实施一个脚本来阻止第三方插件设置Cookie，为此我的HTML页面会返回所有脚本，其中包含＆＃34; text / plain＆＃34;键入以便浏览器最初不会解释它们。

随后，唯一的类型＆＃34; text / javascript＆＃34;采取所有这些＆＃34;停用＆＃34;脚本并将其替换为＆＃34; text / javascript＆＃34;变体：

        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加载等事件。我该如何重置这些事件？

Answer 1

您不应为脚本标记指定src。如果浏览器遇到带有集src的脚本标记，则会立即加载它。要避免此问题，您可以将脚本的网址保留在数据属性中，例如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);
  }
}

以下plunk证明了这种方法。

依赖性问题动态加载JavaScript

1 个答案: