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

Posted 2023-05-08

【中文标题】如何检查 SwiperJS 是不是可以在页面上使用？

【英文标题】：How to check if SwiperJS is available for use on a page?如何检查 SwiperJS 是否可以在页面上使用？

【发布时间】：2021-11-10 10:59:56

【问题描述】：

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

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

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

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

Uncaught ReferenceError: Swiper is not defined

GLightbox 库也是如此，因为我只在图库页面上加载它，但它的初始化代码在 custom.js 文件中。

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

【参考方案1】：

你可以使用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,
  );

【讨论】：

谢谢！ catch 块可以为空吗？我不想在控制台中显示任何消息。

您也可以测试滑块是否存在。查看更新

【参考方案2】：

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