时间戳

首页 > 解决方案 > 附加脚本未执行

javascript - 附加脚本未执行

问题描述

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

script3.js

var cond = "hallo"

索引.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>

标签： javascripthtmlsqlajax

解决方案

你得到了"Uncaught ReferenceError: cond is not defined"因为cond变量没有定义......但是！

您想console.log(cond) 使用onload事件处理程序js进行包装......以便您的 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.

    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>

应该管用。oReq.onload（假设您将 js 变量带入全局范围......也就是在函数之外声明它。

为此，我设置了一个 XMLHttpRequest

PS 查看Fetch API而不是 XMLHttpRequest。干净多了。

推荐阅读