附加脚本未执行

Question

我正在尝试将外部脚本导入 HTML 文件的标题。脚本的名称应从定期更新的 SQL 数据表中获取（因此，将导入不同的脚本）。为此，我设置了一个 XMLHttpRequest，在函数中我将 js = 设置为从 SQL 数据表中获取的文本，最后，我将新的 js 附加到我的标题顶部。我认为这可以解决问题，但是，脚本似乎没有成功导入。例如，如果我从适当的脚本控制台记录变量“cond”，那么我会得到一个错误。所以我的问题是为什么脚本没有被执行，我该怎么做才能修复它？

script3.js

var cond = "hallo" 

index.html

<script src="script1.js"></script>
<script src="script2.js"></script>

<script>  //import script with name taken from SQL database 

    function reqListener () {
      console.log(this.responseText);
    }

    var oReq = new XMLHttpRequest(); // New request object. 
    oReq.onload = function() {
        const js = document.createElement("script");
        var noQuotes = this.responseText.split('"').join('');
        js.src = noQuotes;
        document.head.appendChild(js);  //script should now have been appended to top of head 

    };


    oReq.open("get", "index.php", true);
    oReq.send();
</script>

<script>
console.log(cond). //attept to console log variable from imported js file 
</script>

Answer 1

您将获得"Uncaught ReferenceError: cond is not defined"，因为cond 变量尚未定义...！

您想要包装 console.log(cond) with an onload event handler ... 以便您的 html 文档在尝试执行该命令之前等待 js 变量完全加载。

类似：

<script src="script1.js"></script>
<script src="script2.js"></script>

<script>  //import script with name taken from SQL database 

    function reqListener () {
      console.log(this.responseText);
    }

    var oReq = new XMLHttpRequest(); // New request object.

    let js = document.createElement("script");

    oReq.onload = function() {
        var noQuotes = this.responseText.split('"').join('');
        js.src = noQuotes;
        document.head.appendChild(js);  //script should now have been appended to top of head 

    };


    oReq.open("get", "index.php", true);
    oReq.send();

    js.onload = function() {
      console.log(cond)
    };
</script>

应该可以。 （前提是您将 js 变量带入全局范围……也就是在 oReq.onload 函数之外声明它。

为此，我设置了一个 XMLHttpRequest

附：查看 the Fetch API 而不是 XMLHttpRequest。干净多了。