依賴關系問題動態加載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);
  }
} 

這里是普拉克證明了這種方法。