如何检查SwiperJS是否可在页面上使用？

Question

我正在为我的所有网站页面在页脚中使用一个custom.js文件。

在这个custom.js中，有初始化主页上的SwiperJS滑块的代码。

var swiper = new Swiper(".slider-1", {
    loop: true,
});

现在，我只在主页上加载SwiperJS库，因为只有主页需要它。但是，这会导致在其他没有附加脚本的页面中出现以下错误。

Uncaught ReferenceError: Swiper is not defined

同样的情况也发生在GLightbox库中，因为我只在图库页面上加载它，但是它的初始化代码在custom.js文件中。

在运行初始化代码之前，如何检查库是否存在？

Answer 1

您可以使用“尝试-捕捉”。

​

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

​

Answer 2

if (typeof Swiper !== 'undefined') {
  /* DO STUFF */
}