在前端开发中,有时候需要检查某个文件是否存在。比如说,在加载一个 JavaScript 文件之前,你需要确定它是否已经被加载了。这篇文章将介绍如何用 jQuery 和纯 JavaScript 来检查文件是否存在。
检查文件是否存在于 jQuery 中
如果你正在使用 jQuery,可以用 $.getScript()
方法来检查文件是否存在。这个方法会尝试从服务器上加载一个脚本文件,并返回一个 Promise 对象。如果文件存在,Promise 对象的状态就变成 resolved;否则就是 rejected。
下面是一个例子:
$.getScript("path/to/file.js") .done(function(script, textStatus) { console.log("File exists."); }) .fail(function(jqxhr, settings, exception) { console.log("File does not exist."); });
在这个例子中,我们调用了 $.getScript()
方法,并传入一个文件路径作为参数。然后我们用 .done()
和 .fail()
方法来处理 Promise 对象的状态。
如果文件存在,$.getScript()
方法就会执行 .done()
方法,并把加载成功的脚本和状态字符串传递进去。在这个例子中,我们只是简单地在控制台输出了一条消息。
如果文件不存在,$.getScript()
方法就会执行 .fail()
方法,并把 jqXHR 对象、设置对象和异常对象传递进去。在这个例子中,我们输出了一条错误消息。
检查文件是否存在于纯 JavaScript 中
如果你不想使用 jQuery,可以用纯 JavaScript 来检查文件是否存在。这里有两种方法可以实现。
方法一:创建一个 XMLHttpRequest
对象并尝试加载文件
第一种方法是创建一个 XMLHttpRequest
对象,并尝试从服务器上加载文件。如果文件存在,XMLHttpRequest
对象的状态就会变成 200;否则就是 404。
下面是一个例子:
-- -------------------- ---- ------- -------- -------------------- --------- - --- --- - --- ----------------- ---------------------- - ---------- - -- --------------- --- -- - -- ----------- --- ---- - --------------- - ---- - ---------------- - - -- ---------------- ---- ------ ----------- - ---------------------------------- ---------------- - -- -------- - ----------------- ---------- - ---- - ----------------- ---- --- --------- - ---
在这个例子中,我们定义了一个 checkFileExists()
函数,它接受一个 URL 和一个回调函数作为参数。在函数内部,我们创建了一个 XMLHttpRequest
对象,并在它的 onreadystatechange
属性上定义了一个回调函数。当 XMLHttpRequest
对象的状态变化时,这个回调函数就会被执行。
如果状态变成了 4(即请求完成),我们就检查状态码。如果状态码是 200,说明文件存在;否则说明文件不存在。
最后,我们调用 checkFileExists()
函数,并在回调函数中输出检查结果。
方法二:创建一个 Image
对象并尝试加载文件
第二种方法是创建一个 Image
对象,并尝试从服务器上加载文件。如果文件存在,Image
对象的 onload
事件就会被触发;否则就是 onerror
事件。
下面是一个例子:
-- -------------------- ---- ------- -------- -------------------- --------- - --- --- - --- -------- ---------- - ---------- - --------------- -- ----------- - ---------- - ---------------- -- ------- - ---- - ---------------------------------- ---------------- - -- -------- - ----------------- ---------- - ---- - ----------------- ---- --- --------- - ---
在这个例子中,我们定义了一个 checkFileExists()
函数,它接受一个 URL 和一个回调函数作为参数。在函数内部,
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/8903