只在点击事件中加载脚本一次

我在黑客一起香草JavaScript加载外部脚本点击事件。只在点击事件中加载脚本一次

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。

任何帮助将不胜感激。

来源

2016-03-05 HackYa

你想做什么就做什么？只在第一次点击时加载脚本？ – Cymen

是的。只在第一次点击时加载脚本，而不是后续点击。 – HackYa

删除事件侦听器一旦触发：

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; 
}

来源

2016-03-05 00:20:26 Malk

对不起大卫沃尔什。你的包装很好地工作，但上面的脚本对我来说更简洁。所以我要和马克一起去。谢谢！我实际上曾尝试添加.removeEventLister，我明白为什么它不起作用;因为我试图在它被解雇之前将其删除。 – HackYa

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

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

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

来源

2016-03-05 00:14:49 Cymen

不是。不太清楚你的意思是“匹配脚本src的后缀/结尾”，但你的正则表达式？ “srcSuffix $”（不知道这是什么）无法阻止后续加载脚本。 – HackYa

@HackYa是的，我犯了一个错误 - 我会解决它。 – Cymen

@HackYa我修复了这个错误 – Cymen

也许尝试在函数定义之前设置一个标志。这样你就可以在函数开始时检查标志，并省略其他标志。你在互联网上找到了一个很好的例子。看看这个solution。

来源

2016-03-05 00:17:22

谢谢。没有使用David Walsh的包装功能，它确实有效。但是，Malk的删除EventlListner的方法似乎更适合我？ – HackYa

你说得对，那种方法更好。所以去那个。 –

只在点击事件中加载脚本一次

回答

相关问题