javascript - Javascript 中仅针对 Safari

Question

我已经在我的 squarespace 网站上很好地运行了这段代码，它使用视频作为背景图像。唯一的问题是我创建了一个自定义导航菜单，并在其他地方添加了一些 jquery，每当视频设置为背景横幅图像时，它似乎就停止在 Safari 中工作。

我尝试将 Safari 添加到用户代理列表中，但这自然也会影响 chrome，并且视频无法播放。

谁能告诉我如何定位 safari 桌面浏览器以忽略该脚本而不影响 Chrome？

<script type="text/javascript">
  $(window).bind("load", function() {
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) 
    {
      } else {
      var banner = $('#pageWrapper img').first();
      if (banner.length === 0)
        banner = $('.banner-thumbnail-wrapper > #thumbnail > img').first();
      if (banner.length === 0)
        banner = $('#parallax-images img').first();
      if (banner.length === 0)
        banner = $('.has-main-image img').first();
      if (banner.length === 0)
          banner = $('.primary-image img').first();
     if (banner.length === 0)
          banner = $('#page-thumb img').first();
      var url = "https://max-fedorov-pzor.squarespace.com/s/Frog-eggs.mp4";
      banner.hide();
      $('<video class="bannerVideo" autoplay="" loop="" preload><source src="' + url + '" type="video/mp4"></video>').insertAfter(banner);
      adjustBanner($('.bannerVideo'), banner);
      setTimeout(function() {
        adjustBanner($('.bannerVideo'), banner);
      }, 2000);
      $(window, banner).resize(function() {
        adjustBanner($('.bannerVideo'), banner);
        setTimeout(function() {
          adjustBanner($('.bannerVideo'), banner);
        }, 200);
      });
    }
    function adjustBanner (video, banner) {
      video.css({
        height: banner.css('height'),
        width: banner.css('width'),
        top: banner.css('top'),
        left: banner.css('left'),
        position: 'relative',
        'object-fit': 'inherit'
      });
    }
  });

非常感谢。

Answer 1

这里有一个检查 Safari 的技巧。我还没有测试过它，但据说它可以检测所有版本的 safari。

var isSafari = /constructor/i.test(window.HTMLElement);

还有更多选择；有些是特定于 <=v5 或 v6 的。我在 http://browserhacks.com/ 上找到了它们搜索“ Safari ”

还有一个对象最好只在 chrome window.chrome 中定义，这样您就可以检查它是否未定义以消除 chrome。

另一个选项 - 在这种情况下可能不相关，但如果您知道需要使用的确切功能，并且您不介意使用库:https://modernizr.com/