如何检查页面上是否可以使用 Swiper?
How to check if SwiperJS is available for use on a page?
我在所有网站页面的页脚中使用单个 custom.js 文件。
在这个 custom.js 中有初始化主页上的 SwiperJS 滑块的代码。
var swiper = new Swiper(".slider-1", {
loop: true,
});
现在,我只在主页上加载 SwiperJS 库,因为只有主页需要它。但这会导致其余未附加脚本的页面出现以下错误。
Uncaught ReferenceError: Swiper is not defined
GLightbox 库也会发生同样的情况,因为我只在图库页面上加载它,但它的初始化代码在 custom.js 文件.
如何在 运行 初始化代码之前检查库是否存在?
if (typeof Swiper !== 'undefined') {
/* DO STUFF */
}
你可以使用try-catch
try {
let swiper = new Swiper(".slider-1", {
loop: true,
});
}
catch (e) { /* console.log("no swiper") */ }
或
const slider = document.querySelector(".slider-1");
if (slider) {
let swiper = new Swiper(".slider-1", {
loop: true,
});
}
我在所有网站页面的页脚中使用单个 custom.js 文件。
在这个 custom.js 中有初始化主页上的 SwiperJS 滑块的代码。
var swiper = new Swiper(".slider-1", {
loop: true,
});
现在,我只在主页上加载 SwiperJS 库,因为只有主页需要它。但这会导致其余未附加脚本的页面出现以下错误。
Uncaught ReferenceError: Swiper is not defined
GLightbox 库也会发生同样的情况,因为我只在图库页面上加载它,但它的初始化代码在 custom.js 文件.
如何在 运行 初始化代码之前检查库是否存在?
if (typeof Swiper !== 'undefined') {
/* DO STUFF */
}
你可以使用try-catch
try {
let swiper = new Swiper(".slider-1", {
loop: true,
});
}
catch (e) { /* console.log("no swiper") */ }
或
const slider = document.querySelector(".slider-1");
if (slider) {
let swiper = new Swiper(".slider-1", {
loop: true,
});
}