Question

我在另一个文档中有一个iframe，我想放一个D3动画。由于我无法访问主页面文件，因此我动态加载了src。

问题是，如果我在加载库的函数和使用它的函数之间有一个alert（），一切正常。但是没有它（这就是我之后的事情）我得到了d3未知的控制台错误。

我尝试将d3Check（）放在window.onload中，我试着把它放在setTimeout中，但没有运气。

为什么会发生这种情况以及如何在没有警报的情况下使其顺利运行？

    <!DOCTYPE html>
<html>
<body>

<input id="btn" type="button" value="Click me"/>

<script>

function d3Load() {
    var jsElm = document.createElement("script");
    jsElm.type = "text/javascript";
    jsElm.src = "https://d3js.org/d3.v4.min.js";
    jsElm.charset = "utf-8";
    document.head.appendChild(jsElm);
//debugger;
};
//debugger;

function d3Check() {
var a = d3.select("body");
alert("good");
};

d3Load();
alert();
d3Check();

</script>

</body>
</html>

Answer 1

设置src jsElem属性后，源将在后台异步加载，因此您可能需要等待加载完成，直到您继续。这可以使用onload标记的script属性来完成： https://developer.mozilla.org/de/docs/Web/API/HTMLScriptElement

<!DOCTYPE html>
<html>
<body>

<input id="btn" type="button" value="Click me"/>

<script>

function d3Load() {
    var jsElm = document.createElement("script");
    jsElm.type = "text/javascript";
    jsElm.src = "https://d3js.org/d3.v4.min.js";
    jsElm.charset = "utf-8";
    jsElm.onload = d3Check;
    document.head.appendChild(jsElm);
};


function d3Check() {
var a = d3.select("body");
alert("good");
};

d3Load();

</script>

</body>
</html>

Answer 2

在尝试使用其中包含的任何方法之前，您需要等待脚本的加载事件。

jsElm.onload = d3Check();

更多详情here

外部库的动态加载失败

2 个答案: