Question

我正在尝试通过我的HTML页面中的Javascript动态添加脚本标记。在代码之后，我试图调用新添加的脚本的一些函数。但是，我收到了JS错误，因为到那时脚本还没有加载。我已经阅读了多篇文章，但没有一篇文章解释了如何执行明确添加的脚本。

Answer 1

您需要侦听新添加的脚本的onload事件，或者IE＆lt; onreadystatechange 11。

var script = document.createElement('script');

script.onload = function() {
  // it's ready, so call your functions here
}

// now insert your new script into the document

对于IE＆lt; 11：

script.onreadystatechange = function() {
  if (script.readyState === 'loaded' || script.readyState === 'complete') {
    // it's ready, so call your functions here
  }
}

Answer 2

这将允许您在当且仅当整个页面已加载时执行脚本。还有其他方法可以做到这一点，但我认为这个方法简单有效：

<script>
     function downloadJSAtOnload() {
         var element = document.createElement("script");
         element.src = './js/ding.js';
         document.body.appendChild(element);
         var element1 = document.createElement("script");
         element1.src = './js/dong.js';
         document.body.appendChild(element1);
     }
     if (window.addEventListener)
         window.addEventListener("load", downloadJSAtOnload, false);
     else if (window.attachEvent)
         window.attachEvent("onload", downloadJSAtOnload);
     else window.onload = downloadJSAtOnload;
</script>

将其放在身体标记末尾的页面上。这段代码导入的任何内容都将执行死机，确保头部调用的所有脚本都在那里。

我在整个地方都使用这种模式，因为它是语义的。我的“库”类型脚本被加载到我的头脑中，然后我的自定义代码在执行之前等待整个dom呈现。

在Javascript中动态添加脚本标记

2 个答案: