Question

在我的网站上包含/加载第三方小部件后，我在调用函数方面遇到了一些麻烦。

考虑这种情况。我加载了一个脚本，它可以从第三方库生成小部件。

<script>
var element= document.createElement("script");
element.src = 'http://example.com/script.js';
document.body.appendChild(element);
</script>

完成加载后，然后创建#someElement div标签，其中style属性包含一些规则并将其附加到body元素。

我想要做的是删除style属性并添加一些CSS类。

所以，问题是，如何检查，加载该文件，或者创建该元素并在此之后调用我的函数？

谢谢！

Answer 1

检查脚本是否已加载：

如果脚本在全局空间中创建任何变量或函数，您可以检查它们是否存在：

外部JS（全球范围内） -

var myCustomFlag = true;

并检查是否已运行：

if (typeof window.myCustomFlag == 'undefined') {
    //the flag was not found, so the code has not run
    $.getScript('<external JS>');
}

您可以通过选择所有元素并检查其src属性来检查相关标签是否存在：

//get the number of `<script>` elements that have the correct `src` attribute
var len = $('script').filter(function () {
    return ($(this).attr('src') == '<external JS>');
}).length;

//if there are no scripts that match, the load it
if (len === 0) {
    $.getScript('<external JS>');
}Or you can just bake this .filter() functionality right into the selector:

var len = $('script[src="<external JS>"]').length;

进一步讨论。见：Verify External Script Is Loaded

如何在加载异步Javascript文件时调用函数？

1 个答案: