Javascript 如何检查是否已经包含JS文件?
我已将我的javascript拆分为不同的文件。我想防止javascript文件被加载两次。我怎样才能做到这一点呢?不使用任何框架(据我所知),您只能通过检查全局范围中的某个变量是否已经声明来做到这一点 您可以声明一个变量Javascript 如何检查是否已经包含JS文件?,javascript,Javascript,我已将我的javascript拆分为不同的文件。我想防止javascript文件被加载两次。我怎样才能做到这一点呢?不使用任何框架(据我所知),您只能通过检查全局范围中的某个变量是否已经声明来做到这一点 您可以声明一个变量var include1=true内部包含1.js,并执行以下操作 if (window.include1 !== true) { // load file dynamically } 不要包含它们两次。毕竟,是你在做包含 但是,如果您动态地执行这些包含,您可以检查脚
var include1=true代码>内部包含1.js
,并执行以下操作
if (window.include1 !== true) {
// load file dynamically
}
不要包含它们两次。毕竟,是你在做包含
但是,如果您动态地执行这些包含,您可以检查脚本是否设置了某些全局函数或对象。例如,如果文件中包含以下脚本:
Foo = function () {};
然后我把它包括在下面:
<script src="../foo.js"></script>
在浏览器解析该脚本标记之前,Foo
是undefined
。处理标记后,Foo
是一个函数
。您可以使用基于此的一些逻辑来确定是否应该包含某些文件。下面是一个测试,根据js文件的路径查看是否包含脚本:
function isScriptAlreadyIncluded(src){
var scripts = document.getElementsByTagName("script");
for(var i = 0; i < scripts.length; i++)
if(scripts[i].getAttribute('src') == src) return true;
return false;
}
函数isScriptAlreadyIncluded(src){
var scripts=document.getElementsByTagName(“脚本”);
对于(var i=0;i
它适用于所有未通过AJAX加载的脚本,不过如果您运行了jsonp代码,您可能需要修改它。您需要手动跟踪并确保。UweB的建议也会起作用
您还可以签出Require.js,它可以帮助您组织文件。我使用在每个动态加载脚本底部添加的通用自调用函数解决了这个问题
首先,在我的基本文件中声明一个新的空数组或一个将始终加载的脚本,即my case index.php的主页面
var scriptsLoaded = new Array();
然后在加载的脚本末尾添加一个自执行函数:
(function () { scriptsLoaded.push( 'this_script_name.js' ) })();
使用这种方法,scriptsLoaded数组中的任何文件名都应该只引用已经完全加载的脚本。只需检查此数组即可指示是否已加载脚本,该脚本也可用于检查是否为脚本所需的任何内容执行加载样式函数。有时,js文件是通过其他方式加载的(例如,通过js)
这时window.performance
就可以派上用场了。与其他答案中建议的在脚本
标记之间进行检查不同,我们可以在加载的资源之间进行检查,方法是:
let resources = performance.getEntries()
.filter(e => e.entryType === 'resource')
.map(e => e.name);
if (resources.indexOf("//domain.com/path/to/script.js") === -1) {
// Script was not yet loaded.
}
窗口。性能
浏览器兼容性现在还不错:
如果我们想同时检查脚本
标记和窗口.resources
,我们可以将其放在一个函数中:
function is_script_already_included(src){
const found_in_resources = performance.getEntries()
.filter(e => e.entryType === 'resource')
.map(e => e.name)
.indexOf(src) !== -1;
const found_in_script_tags = document.querySelectorAll(`script[src="${src}"]`).length > 0;
return found_in_resources || found_in_script_tags;
}
只包括一次。不严重,你怎么包括它们?你能修改JS文件的内容吗?通常你应该只有一个或几个JS文件(连接/缩小),所以手工检查非常简单。你使用过服务器端语言吗,比如PHP?如果是这样,那么您可以创建一个名为addJs()
(例如)的函数,该函数仅在脚本尚未添加的情况下输出
标记。可能相关:我喜欢这个答案,因为它表明可以跟踪包含的文件,但实际上我永远不会推荐这种方法,虽然您现在可以将脚本拆分为不同的文件,但您可能希望以后将它们合并为一个文件以获得更好的性能,在这种情况下,这种方法将不再有效。@MattBrowne我原则上同意,但通常并不是那么简单。有时,一个框架(或由于其他原因无法控制)可能包含也可能不包含脚本文件。请您解释一下您的代码及其兼容性好吗?您好@martin braun,我根据要求添加了一些上下文。