单击事件仅加载一次脚本

Question

我已经一起使用普通的javascript来在click事件上加载外部脚本。

var searchLabel = document.getElementById('search-toggle-label');
searchLabel.onclick = function(){
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "wp-content/themes/2016/js/cse.js."; 
    document.getElementsByTagName("head")[0].appendChild(script);
    return false;
}

但是，每次单击事件时，它都会继续加载相同的脚本。

所以我输入了if语句来检查值和类型。 “ ===”

var searchLabel = document.getElementById('search-toggle-label');
if (typeof searchLabel === 'undefined') {
    searchLabel.onclick = function() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "wp-content/themes/2016/js/cse.js."; 
        document.getElementsByTagName("head")[0].appendChild(script);
        return false;
    }
}
else {
    alert('loaded already');
}

显然，这是错误的，因为我在页面加载和单击事件时收到警报，脚本未加载。

我感到难过。 我知道有一个使用jQuery的简单解决方案，但是我实际上正在尝试学习编写JavaScript。

任何帮助将不胜感激。

Answer 1

触发事件监听器后，将其删除：

var searchLabel = document.getElementById('search-toggle-label');
searchLabel.addEventListener('click', loadScript, false);

function loadScript(){
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "wp-content/themes/2016/js/cse.js."; 
    document.getElementsByTagName("head")[0].appendChild(script);
    searchLabel.removeEventListener('click', loadScript, false);
    return false;
}

Answer 2

如果DOM中存在脚本，则添加一个函数以返回true / false。 这是一个：

function isScriptLoaded(src) {
  return !!Array.prototype.filter.call(document.getElementsByTagName('script'), function(node) {
    return node.src === src;
  });
}

然后使用它来测试脚本是否已经插入到DOM中。

Answer 3

也许尝试在功能定义之前设置一个标志。 这样，您可以在函数开始时检查标志，而忽略其余标志。 您也有一个很好的例子，我在互联网上找到了。 查找此解决方案 。