如何在javascript中检测用户的浏览器并相应地加载类名？

Question

我有以下一段代码。 有 3 个桌面部分，类名为“desktop-slider”，3 个移动部分，类名为“mobile-slider”。 现在，在每个页面加载时，桌面用户应该看到来自“桌面滑块”的 3 个随机部分中的 1 个，而移动用户应该在每个页面加载时看到来自“移动滑块”的随机部分。

现在下面的代码在桌面上运行良好，但即使是移动版本也为桌面用户加载。

现在我想添加一个条件来检测用户浏览器或用户代理并相应地加载相应的部分。

希望我清楚地解释了这个问题。 请帮忙。 我卡住了。。

window.onload=function() {
      // For Desktops
      var D = document.getElementsByClassName("desktop-slider");
      var m = D.length;
      var n = parseInt(Math.random()*m);

     // For Mobiles
      var M = document.getElementByClassName("mobile-slider");
      var p = M.length; // Mobile
      var q = parseInt(Math.random()*p); // Mobile

      for (var i=m-1;i>=0;i--) {
          var e = D[i];
          e.style.display='none';
      }
    E[n].style.display='block';
}

Answer 1

您可以像这样获得用户代理https://developer.mozilla.org/en-US/docs/Web/API/NavigatorID/userAgent或者，我建议您使用这样的库： https://github。 com/faisalman/ua-parser-js

例子：

if (window.navigator.userAgent.match(/Mobile/)) {
 //do something
} else {
 //do something else
}