javascript - 检查浏览器是否有 Pinterest Pin it 按钮-6ren

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

转载作者：数据小太阳更新时间：2023-10-29 05:49:38

我编写了一个脚本来为我网站上的大多数图片添加一个 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);

最佳答案

新的 Pinterest 扩展 (2017)

注入(inject) <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"]
    });
});

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

关于javascript - 检查浏览器是否有 Pinterest Pin it 按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33305676/

文章推荐： javascript - Chrome webrequest 在 requestBody 中看不到 POST 数据

文章推荐： javascript - Chrome 扩展程序 identity.email 为空

文章推荐： javascript - 微小的MCE 4 : add Class to selected Element

文章推荐： javascript - 与 react/redux 共享 actions 和 reducers

iPhone核心位置: DIfferentiate pin for custom pin image
我正在使用 - (MKAnnotationView *) mapView:(MKMapView *)mapView viewForAnnotation:(id ) annotation{ 为自定义图钉
memory - Box::pin()vs Pin::new_unchecked()
试图了解Box::pin()和Pin::new_unchecked()之间的区别。假设以下代码: use std::pin::Pin; use std::marker::PhantomPinned;
intel-pin - Intel Pin 3.0无法识别MPX指令？
我有最新版本的 Intel Pin 3.0 版本 76887。我有一个支持 MPX 的玩具示例: #include int g[10]; int main(int argc, char **arg
c# - 如何生成类似于预付费电话卡 PIN 的唯一 PIN 码
我正在寻找一种算法来创建类似于预付费电话卡的安全唯一随机数。我确实看过Generating a unique 15 digite Pin code from a 10digit number但它确实让
c# - GCHandle、Marshal、托管和非托管内存 : To pin or Not To Pin
作为Hans Passant wishes这是我的场景。我有一个混合模式应用程序，其中 native 代码完成所有艰苦的工作，同时尊重性能，托管代码仅负责 GUI。用户也将通过编写他们专有的 C# 代
ios - 区分 UserLocation Pin 和用户添加的 Pin 之间的区别
我正在尝试解决一个我不确定如何解决的问题。在我的应用程序中，本地图套件启动时，我会在用户的当前位置放置一个图钉。 Mapkit 委托(delegate)给 viewForAnnotation，它设置了
android - 如何在不等待通过地址邮寄接收 PIN 的情况下继续从 admob 获取 PIN？
我在 android 应用程序中集成了 admob，我达到了阈值。它会显示一条消息，您的付款目前处于暂停状态，因为您尚未验证您的地址有什么方法可以避免等待数周才能从 admob 收到用于地址验证的
c - Linux 中的 "pinned"页如何呈现(或实际上是 "pin")自身
我正在使用 get_user_pages在 Linux 内核驱动程序中，为了 [硬件] DMA 固定内存。一切似乎都很好 - 但我很难证明“固定”正在做正确的事情。当我在做 get_user_pag
IOS 11 - 当另一个 pin 落后时，MKMapView pin 对话框不可点击
在使用 MKMapView 时，我确实注意到了 IOS 11 上的一个问题。当我想从图钉对话框中点击按钮 Action 并且按钮 Action 后面有另一个图钉时，它没有得到手势。应该是zPosi
c++ - 英特尔 PIN :Initial Set up of Intel PIN tool
我是 PIN 工具的新手。我只是尝试运行自述文件中给出的示例代码。最初我使用以下方式构建: $ cd source/tools/ManualExamples $ make all 它正确编译并创建了
php - 我的登录脚本包含用户名、密码和 PIN 码，但无法使用 PIN 码登录(不知何故)
我遇到一个小问题...我有自己的网站，带有一个简单的 mysqli 登录脚本，每当我输入用户名、密码和 PIN 码时，它都会让我登录... 我现在的问题是，我可以仅使用用户名和密码登录我的网站(无需输
ios - MapView Pin 注释的问题 - 本地图缩放/平移/区域更改时，Pin 会失去颜色
我有一个显示现金点位置的 map View 。注释被删除，可以单击标注以转到包含有关该位置的更多详细信息的页面。提款机分为免费和付费两种，免费的提款机别针是绿色的，另一个是红色的。当别针掉落时，它们就
embedded - 在不输入 PIN 的情况下，可以从受 PIN 保护的 SIM 中读取哪些数据/元数据？
我正在构建一个带有 GSM 调制解调器和 SIM 卡的设备。我想用别针保护 SIM 卡，以防止在现场安装设备时误用。将关联 SIM 卡的 PIN 码存储到每个设备中会很麻烦。此外，如果更换 SIM
rust - 如何从 Pin>> 中获取 Pin<&mut T>
我正在编写一个需要共享流所有权的流适配器。将流(私下)存储在 Pin>> 中是否正确？ ? 如何调用poll_next(self: Pin在流？最佳答案 Mutex没有所谓的结构钉扎，这在 std
rust - 为什么 Rust 需要 "a value, once pinned, must remain pinned forever"？
我对 Pin 的要求感到困惑那个 a value, once pinned, must remain pinned forever. 我看到了the discussion thread on redd
ios - 如何在 iOS 下获取 TrustKit 框架的 SSL pinning 的备份 pin？
我目前正在实现 TrustKit framework在我的 iOS 应用程序中为 SSL 连接启用 SPKI 固定。我偶然发现了正确配置 TrustKit 所必需的“备用密码”。不幸的是，API 文档
rust - 为什么我们使用 `Box::pin` 来表示 !Unpin 而使用 `Pin::new` 来表示 Unpin？
在 rust 中学习 Pin 的实现时我很困惑。我知道当一个类型不能安全移动时，它可以实现 !Unpin。 Pin 是为了防止别人从这些类型中获取到&mut T，使他们不能是std::mem::sw
at-command - 当 SIM 卡没有 PIN 时，如何使用 AT 命令更改/创建 SIM PIN？
我用的是 SIM868 模块，我用的是我常用的 SIM 卡，没有问题，但现在我买了一张新的 SIM 卡，没有 pin。我需要添加 PIN 码以提高安全性。我使用以下命令检查了它是否没有启用 PIN:
iphone - 创建一个 Drop Pin MKPointAnnotation 支持拖动，就像 map 应用程序中的 Drop Pin 一样
我想知道是否可以在自定义 MKMapView 中创建 MKPinAnnotation，它可以像 map 应用程序中的“Drop Pin”注释一样响应触摸和拖动。我想要一种在 GPS 给出的位置放置图
Android:如何仅为我的应用设置密码/PIN？
我正在开发一个应用程序，我需要通过为用户设置密码/密码/密码来设置安全功能，以便每当他们从后台打开应用程序时，应用程序都会要求输入密码/密码/密码。我阅读了一些文章/解决方案，例如 this但他们没有

数据小太阳

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城