Question

我编写了一个脚本，为我网站上的大多数图片添加Pinterest按钮。问题是当某人在浏览器中启用Chrome Pin it extension时，＆＃34;将其固定为＆＃34;按钮为用户显示两次。

无论如何，在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);

Answer 1

新的Pinterest扩展（2017）

直接在<span>：

下注入<body悬停按钮

<span style="border-radius: 3px;
    text-indent: 20px;
    width: auto;
    padding: 0px 4px 0px 0px;
    text-align: center;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    font-stretch: normal;
    font-size: 11px;
    line-height: 20px;
    font-family: &quot;Helvetica Neue&quot;, Helvetica, sans-serif;
    color: rgb(255, 255, 255);
    background: url(&quot;data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMzBweCIgd2lkdGg9IjMwcHgiIHZpZXdCb3g9Ii0xIC0xIDMxIDMxIj48Zz48cGF0aCBkPSJNMjkuNDQ5LDE0LjY2MiBDMjkuNDQ5LDIyLjcyMiAyMi44NjgsMjkuMjU2IDE0Ljc1LDI5LjI1NiBDNi42MzIsMjkuMjU2IDAuMDUxLDIyLjcyMiAwLjA1MSwxNC42NjIgQzAuMDUxLDYuNjAxIDYuNjMyLDAuMDY3IDE0Ljc1LDAuMDY3IEMyMi44NjgsMC4wNjcgMjkuNDQ5LDYuNjAxIDI5LjQ0OSwxNC42NjIiIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxIj48L3BhdGg+PHBhdGggZD0iTTE0LjczMywxLjY4NiBDNy41MTYsMS42ODYgMS42NjUsNy40OTUgMS42NjUsMTQuNjYyIEMxLjY2NSwyMC4xNTkgNS4xMDksMjQuODU0IDkuOTcsMjYuNzQ0IEM5Ljg1NiwyNS43MTggOS43NTMsMjQuMTQzIDEwLjAxNiwyMy4wMjIgQzEwLjI1MywyMi4wMSAxMS41NDgsMTYuNTcyIDExLjU0OCwxNi41NzIgQzExLjU0OCwxNi41NzIgMTEuMTU3LDE1Ljc5NSAxMS4xNTcsMTQuNjQ2IEMxMS4xNTcsMTIuODQyIDEyLjIxMSwxMS40OTUgMTMuNTIyLDExLjQ5NSBDMTQuNjM3LDExLjQ5NSAxNS4xNzUsMTIuMzI2IDE1LjE3NSwxMy4zMjMgQzE1LjE3NSwxNC40MzYgMTQuNDYyLDE2LjEgMTQuMDkzLDE3LjY0MyBDMTMuNzg1LDE4LjkzNSAxNC43NDUsMTkuOTg4IDE2LjAyOCwxOS45ODggQzE4LjM1MSwxOS45ODggMjAuMTM2LDE3LjU1NiAyMC4xMzYsMTQuMDQ2IEMyMC4xMzYsMTAuOTM5IDE3Ljg4OCw4Ljc2NyAxNC42NzgsOC43NjcgQzEwLjk1OSw4Ljc2NyA4Ljc3NywxMS41MzYgOC43NzcsMTQuMzk4IEM4Ljc3NywxNS41MTMgOS4yMSwxNi43MDkgOS43NDksMTcuMzU5IEM5Ljg1NiwxNy40ODggOS44NzIsMTcuNiA5Ljg0LDE3LjczMSBDOS43NDEsMTguMTQxIDkuNTIsMTkuMDIzIDkuNDc3LDE5LjIwMyBDOS40MiwxOS40NCA5LjI4OCwxOS40OTEgOS4wNCwxOS4zNzYgQzcuNDA4LDE4LjYyMiA2LjM4NywxNi4yNTIgNi4zODcsMTQuMzQ5IEM2LjM4NywxMC4yNTYgOS4zODMsNi40OTcgMTUuMDIyLDYuNDk3IEMxOS41NTUsNi40OTcgMjMuMDc4LDkuNzA1IDIzLjA3OCwxMy45OTEgQzIzLjA3OCwxOC40NjMgMjAuMjM5LDIyLjA2MiAxNi4yOTcsMjIuMDYyIEMxNC45NzMsMjIuMDYyIDEzLjcyOCwyMS4zNzkgMTMuMzAyLDIwLjU3MiBDMTMuMzAyLDIwLjU3MiAxMi42NDcsMjMuMDUgMTIuNDg4LDIzLjY1NyBDMTIuMTkzLDI0Ljc4NCAxMS4zOTYsMjYuMTk2IDEwLjg2MywyNy4wNTggQzEyLjA4NiwyNy40MzQgMTMuMzg2LDI3LjYzNyAxNC43MzMsMjcuNjM3IEMyMS45NSwyNy42MzcgMjcuODAxLDIxLjgyOCAyNy44MDEsMTQuNjYyIEMyNy44MDEsNy40OTUgMjEuOTUsMS42ODYgMTQuNzMzLDEuNjg2IiBmaWxsPSIjYmQwODFjIj48L3BhdGg+PC9nPjwvc3ZnPg==&quot;) 3px 50% / 14px 14px no-repeat rgb(189, 8, 28);
    position: absolute;
    opacity: 1;
    z-index: 8675309;
    display: none;
    cursor: pointer;
    border: none;
    -webkit-font-smoothing: antialiased;
    top: 240px;
    left: 110px;
">Save</span>

所以一个简单的检查就是：

var pin = document.querySelector('body > span[style*="8675309"][style*="rgb(189, 8, 28)"]')

或者您可以检查包含P徽标的整个背景base64字符串。

旧PinIt扩展的旧答案：

检查安装了Pin It扩展程序的页面，我们可以看到它将自己的属性添加到<body>：

<body data-pinterest-extension-installed="cr1.39.1">

在js中很容易确定属性的存在：

if (document.body.dataset.pinterestExtensionInstalled) {
    console.log("Pin It extension detected!");
}

请注意，该属性是在加载页面后添加的，因此您无法在DOMContentLoaded事件处理程序中进行检查;暂停setInterval或使用MutationObserver：

包含"run_at": "document_end"或"document_idle"的内容脚本（默认模式）：

var PinItInstalled = undefined;

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

包含"run_at": "document_start"的内容脚本：

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"]
    });
});

P.S。不要忘记测试如果Pin It扩展程序在悬停时显示其按钮的选项被禁用会发生什么。

Answer 2

虽然检测页面上存在扩展名或pinit.js可能是值得的，但更简单的解决方案是简单地将data-pin-no-hover属性添加到图像中。这将告诉扩展程序忽略图像。

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

如果设置了data-pin属性，确实没有理由关心它是否已安装。

另一个选择是不创建自己的悬停按钮，但使用pinit.js为您创建悬停按钮。请参阅the docs。

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

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

2 个答案:

新的Pinterest扩展（2017）

旧PinIt扩展的旧答案：