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

【问题标题】：Check to see if browser has Pinterest Pin it button检查浏览器是否有 Pinterest Pin it 按钮
【发布时间】：2015-10-23 15:07:23
【问题描述】：

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

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

【问题讨论】：

stackoverflow.com/questions/8042548/… 这可能会有所帮助
您只需将data-pin-no-hover="true" 添加到您的图像中。容易得多。
@ZackArgyle，回答这个问题，信息值得，您还可以添加一行代码来设置属性（只是为了完整起见）。
很高兴发布答案。

标签： javascript jquery google-chrome google-chrome-extension pinterest

【解决方案1】：

新的 Pinterest 扩展程序（2017 年）

在<body 正下方注入一个<span> 悬停按钮：

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

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

【讨论】：

在我看来 data-pinterest-extension-installed 属性不再添加了。也许在 Chrome 上的最新版本中发生了变化。只有我一个人吗？

【解决方案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>

【讨论】：

我认为将设置属性的代码添加到第一种方法是有意义的，可能类似于$(this).attr("data-pin-no-hover", "true")。