javascript - 警报或 Console.log 无法通过动态加载的 JavaScript 工作

Question

我使用以下函数来动态加载 JavaScript:

function loadJS(file, c)
{
    var jsEl = document.createElement("script");
    jsEl.type = "application/javascript";
    jsEl.src = file;
    jsEl.async = false;
    document.body.appendChild(jsEl);
    if (c) { jsEl.addEventListener('load', function (e) { c(null, e); }, false); }
    document.getElementsByTagName("head")[0].appendChild(jsEl);
}

下面是动态添加文件中包含的函数之一:

function formelements_SELECT_add(x)
{
    console.log("add");
    alert("add");
    var id = x[1];
    var value = x[2];
    var index = x[3];
    var select = document.getElementById(id);
    var option;
    option = document.createElement("option");
    option.text = value;
    select.add(option, index);
}

我知道 JavaScript 文件被正确添加并且函数被执行，因为 option 被添加到 select 元素。为什么 alert 和 console.log 不执行？如果我单击检查，则没有错误消息。

编辑

这是我用来调用函数的代码:

var typeAndElement = x[0][0] + "_" + x[0][1];
start = i + 1;
if (!window[typeAndElement])
{
    loadJS("https://websemantica.org/scripts/" + x[0][0] + "/" + x[0][1] + ".js", continueManipulatingElements(typeAndElement, actions, x, start, total));
    return;
}
else
{
    fn = window[typeAndElement + "_" + x[0][2]];
    if (typeof fn === 'function')
        fn(x);
}

我最初不想包含它，因为我已经知道它在工作，但考虑到它使用的是动态数据，它是如何工作的还不清楚。

此外，我还编辑了 loadJS 函数:

function loadJS(file, c)
{
    var jsEl = document.createElement("script");
    jsEl.type = "text/javascript";
    jsEl.src = file;
    jsEl.async = false;
    if (c) { jsEl.addEventListener('load', function (e) { c(null, e); }, false); }
    document.getElementsByTagName("head")[0].appendChild(jsEl);
}

现在看来问题已经解决了。

Answer 1

跳出三件事:

1. 您将脚本附加到页面两次，一次附加到 document.body，另一次附加到 document.getElementsByTagName("head")[0]。第二个会将脚本从第一个位置移动到第二个位置。您实际上只需要执行其中一项即可。

2. 您在附加元素后查看load 事件。如果脚本在缓存中，您可能会错过该事件。 在将脚本附加到 DOM 之前将其 Hook 。

3. 您没有在引用的代码中执行任何操作来调用您正在添加的脚本定义的函数。

---

其他旁注:

• 无需设置类型，默认为JavaScript。
• 无需设置async，所有动态插入的script 元素都是异步的(now，并不总是如此)。
• 作为Jarosław Wlazło points out document.alert 不是函数；只需 alert 即可。 :-)