Javascript 检查浏览器是否有Pinterest Pin it按钮

我已经编写了一个脚本，将Pinterest按钮添加到我网站上的大多数图像中。问题是，当某人在浏览器中启用了“锁定”按钮时，“锁定”按钮会为用户显示两次

在JavaScript中，是否还有其他方法来检查用户是否在其浏览器中启用了此扩展

(function($) {

    $(function() {

      $('.container img').each(function() {
          if ($(this).parent('a')) {
              var $permalink = $(this).parent('a').attr('href');
          }
          else {
              var $permalink = $(location).attr('href');
          }


          var $permalink = $(location).attr('href'),
              $title = $('h1.product_name').text() || $('h2.header');

          var $linkhtml = $('<a/>', {
              'class':'pin-it-button pinme',
              'html': '<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />',
              'count-layout': 'horizontal',
            'style': 'cursor:pointer; position:absolute; bottom:30px; left:0; border:0 none; opacity: 0.4;',
              'href': 'http://pinterest.com/pin/create/button/?url=' + $permalink  + '&media=' + $(this).attr('src') + '&description=' + $title
          });

          if ($(this).parent('a')) {
              $(this).addClass('pinme').parent('a').after($linkhtml);
          }
          else {
              $(this).addClass('pinme').after($linkhtml);
          }

          $('.pinme').hover(
            function() {
              if ($(this).hasClass('pin-it-button')) {
                console.log('hello');
                  $(this).css('opacity', '1');
              }
              else {
                  $(this).parent().siblings('.pin-it-button').css('opacity', '1');
              }
            }, function() {
              if ($(this).hasClass('pin-it-button')) {
                  $(this).css('opacity', '0.4');
              }
              else {
                  $(this).parent().siblings('.pin-it-button').css('opacity', '0.4');
              }
            }
          );


      });
    });
})(jQuery);

（函数（$）{
$（函数（）{
$（'.container img'）。每个（函数（）{
if（$（this.parent（'a'））{
var$permalink=$（this.parent（'a'）.attr（'href'）；
}
否则{
var$permalink=$（位置）.attr（'href'）；
}
var$permalink=$（位置）.attr（'href'），
$title=$（'h1.product_name'）.text（）| |$（'h2.header'）；
变量$linkhtml=$（''{
'class'：'pin-it-button pinme'，
“html”：“，
“计数布局”：“水平”，
'样式'：'光标：指针；位置：绝对；底部：30px；左侧：0；边框：0无；不透明度：0.4；'，
'href'：'http://pinterest.com/pin/create/button/?url='+$permalink+'&media='+$（this）.attr（'src'）+'&description='+$title
});
if（$（this.parent（'a'））{
$（this）.addClass（'pinme'）.parent（'a'）。在（$linkhtml）之后；
}
否则{
$（this）.addClass（'pinme'）。在（$linkhtml）之后；
}
$（'.pinme'）。悬停(
函数（）{
if（$（this）.hasClass（'pin-it-button'））{
log（'hello'）；
$（this.css（'opacity'，'1'）；
}
否则{
$（this）.parent（）.sides（'.pin it button'）.css（'opacity'，'1'）；
}
}，函数（）{
if（$（this）.hasClass（'pin-it-button'））{
$（this.css（'opacity'，'0.4'）；
}
否则{
$（this）.parent（）.sides（'.pin it button'）.css（'opacity'，'0.4'）；
}
}
);
});
});
})（jQuery）；

新的Pinterest扩展（2017年）

---

直接在

下插入一个

<img src="whatevz" data-pin-no-hover="true" />



如果设置了data pin属性，则没有任何理由关心是否安装了它

另一个选项是不创建自己的悬停按钮，而是使用pinit.js为您创建悬停按钮。看


这可能会有所帮助。您只需将数据pin no hover=“true”
添加到图像中即可。更简单。@ZackArgyle，做一个答案，信息是值得的，您也可以添加一行设置属性的代码（只是为了完整性）。很高兴发布答案。我认为将设置属性的代码添加到第一个方法是有意义的，可能类似于
$（this）.attr（“数据针无悬停”，“true”）
。在我看来，似乎不再添加已安装的
数据pinterest扩展插件
属性。可能是Chrome最新版本的一个变化。我是唯一一个吗？
if (document.body.dataset.pinterestExtensionInstalled) {
    console.log("Pin It extension detected!");
}

var PinItInstalled = undefined;

new MutationObserver(function(mutations) {
    PinItInstalled = document.body.dataset.pinterestExtensionInstalled;
    this.disconnect();
}).observe(document.body, {
    attributes: true,
    attributeFilter: ["data-pinterest-extension-installed"]
});

var PinItInstalled = undefined;

document.addEventListener("DOMContentLoaded", function() {
    new MutationObserver(function(mutations) {
        PinItInstalled = document.body.dataset.pinterestExtensionInstalled;
        this.disconnect();
    }).observe(document.body, {
        attributes: true,
        attributeFilter: ["data-pinterest-extension-installed"]
    });
});

<img src="whatevz" data-pin-no-hover="true" />

<script
  type="text/javascript"
  async defer
  data-pin-hover="true"
  src="//assets.pinterest.com/js/pinit.js"
></script>