具有 src 属性的动态添加的脚本元素不会在 src 中加载 js 文件答案

【问题标题】：Dynamically added script element with its src attribute doesn't load the js file in src具有 src 属性的动态添加的脚本元素不会在 src 中加载 js 文件
【发布时间】：2019-01-26 08:08:05
【问题描述】：

我正在使用 CodeMirror 编辑器。它有一个允许更改模式（语言）的选项。我创建了一个代码来加载与语言相对应的 .js 文件。请参阅下面的代码。一切正常。带有 src 属性的 script 元素被添加到 head 中，但是 codemirror 编辑器不加载语言，因为 script 元素是写在 head 中的，但它可能没有加载。

在 html 文件中编写的 python 突出显示 js 脚本正在正确加载。只有动态加载的 js 文件不能使用 codemirror。

请帮帮我，我无法解决这个问题。

languageselect.addEventListener("change",function(){
        language =  languageselect.value ;
        let header = document.head;
        let script = document.createElement("script");
        script.src = "codemirror/mode/" + language + "/" + language + ".js";
        header.appendChild(script);
        editor.setOption("mode",language);
      });

<script src="codemirror/mode/python/python.js"></script>

<!--The python highlighting js script which is written in the html file is loading correctly. Only the dynamically loaded js file aren't working with codemirror.-->

【问题讨论】：

控制台出现什么错误？
您熟悉使用开发工具吗？检查网络窗格并验证脚本是否正在加载。
@RandyCasburn 没有错误。只是没有在浏览器中加载
@CodeSpent 我正在使用开发工具来查看代码。动态添加的js文件我可以完美打开阅读。
下一个问题：编辑器是否在 iFrame 中运行？

标签： javascript html css codemirror

【解决方案1】：

我找到了解决方法。创建脚本元素的属性时，创建一个 onload 属性，它将运行一个函数来更改 CodeMirror 编辑器的模式：

      languageselect.addEventListener("change",function(){
        language =  languageselect.value ;
        src = "codemirror/mode/" + language + "/" + language + ".js";
        let header = document.head;
        
        let script = document.createElement("script");
        script.src = src;
        script.onload = change_language;
        header.appendChild(script);
      
      });

      function change_language(){
        language =  languageselect.value;
        editor.setOption("mode",language);
      };

【讨论】：