Pinterest 和 Fancybox 之间的冲突

Question

我有一个同时包含 Fancybox 和 Pinterest pin 按钮的页面。两者似乎都可以正常工作，但是当我关闭 Fancybox 覆盖时，我看到以下 JavaScript 错误：

Uncaught TypeError: Cannot read property 'data-pin-aha' of null

我的 Pinterest 按钮呈现如下：

<a href="http://pinterest.com/pin/create/button/?url=http://www.mywebsite.com/somepage&amp;media=http://www.mywebsite.com/content/images/2c63a4e0-3b65-4464-934c-77f2a7166090-Dim459X612.jpg&amp;description=some description" class="PIN_1354830754034_pin_it_button PIN_1354830754034_pin_it_beside PIN_1354830754034_hazClick" data-pin-aha="button_pinit" data-pin-config="beside"><span class="PIN_1354830754034_pin_it_button_count" id="PIN_1354830754034_pin_count_0"><i></i>3</span></a>

只是为了好玩，我的 Pinterest 按钮正在异步加载：

(function () {
window.PinIt = window.PinIt || { loaded: false };
if (window.PinIt.loaded) return;
window.PinIt.loaded = true;
function async_load() {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.async = true;
    if (window.location.protocol == "https:")
        s.src = "https://assets.pinterest.com/js/pinit.js";
    else
        s.src = "http://assets.pinterest.com/js/pinit.js";
    var x = document.getElementsByTagName("script")[0];
    x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
    window.attachEvent("onload", async_load);
else
    window.addEventListener("load", async_load, false);
})();

还有我的 Fancybox 链接：

<a href="//vimeo.com/36573701" class="watch"><span>Watch Our Story</span></a>

总的来说，这是一个非常基本的设置。只是为了好玩，我为 Pinterest 使用了普通的内联脚本标签，但得到了同样的错误。

有没有人见过这个错误并知道如何解决它？

Answer 1

我在该页面上收到 Uncaught TypeError: Cannot read property 'data-pin-log' of null 错误。

解决此问题的一种巧妙方法是添加一个 afterShow 事件，该事件将 data-pin-log 属性添加到关闭按钮

  $(".watch").fancybox({
    helpers: {
        media: {}
    },
    afterShow: function(e){
        $('.fancybox-close').attr('data-pin-log', false);
    }
  });

通过将data-pin-log 替换为data-pin-aha，这也可以解决OP 的问题

Answer 2

我在使用 Pinterest 按钮时遇到了类似的问题。原来是 Pinterest 的 pinit.js 脚本有问题。

我有 reported the issue to Pinterest (sign in required)，他们正在查看。

我们在一个页面上使用了 Pinterest 按钮，该页面上有另一个链接并分配了一个点击事件。链接的 HTML 大致是这样的：

<a href="#" class="youCanClickThis"><span>Select</span></a>

点击事件处理程序是这样的：

$('.youCanClickThis').click(function (e) {
    $(this).html('Selected');
});

这个点击处理程序不知何故导致 pinit.js (Uncaught TypeError: Cannot read property 'data-pin-log' of null) 出错。

我unminifiedhttps://assets.pinterest.com/js/pinit.js为了更容易追踪错误。它出现在未缩小的 pinit.js 中的这个函数中：

get: function (b, c) {
    var d = null;
    return d = typeof b[c] === "string" ? b[c] : b.getAttribute(c)
},

具体来说，typeof b[c]。 get() 是从 getData() 调用的，b 的值是直接从任何调用 getData() 传递的。原来是这个函数：

click: function (b) {
    if ((b = a.f.getEl(b || a.w.event)) && b !== a.d.b) {
        if (!a.f.getData(b, "log")) b = b.parentNode;

每当用户单击具有 Pinterest 按钮的页面上的任何内容时，这似乎都会触发。最后一点 - b.parentNode - 是造成我们问题的原因。

到那时，b 已被分配给触发点击事件的元素。在我们的例子中，这就是<a> 中的<span>。但是，由于我们的 JavaScript 将 <a> 标记的内容替换为文本，<span> 不再是文档的一部分，因此不再有 parentNode。

因此b = b.parentNode 导致b 的值为null。

我们通过在单击时不从文档中删除 <span> 来解决此问题。但是，如果 Pinterest 可以添加一个检查以查看 b.parentNode 是否存在，或者其他什么，那就太好了。

（我对 Pinterest 脚本的理解不够透彻，无法知道最好的修复方法是什么，但它是在假设点击事件的源始终具有 parentNode 的前提下构建的，正如本文所展示的那样，不是一个安全的假设）。

Answer 3

我们在使用 jQuery Modal 时遇到了同样的问题。我们通过添加隐藏模式窗口的 onHide 处理程序解决了这个问题，等待几秒钟，然后删除模式窗口。不是最漂亮的解决方案，但它确实有效。

Answer 4

今天正在推动解决此问题；很抱歉给您带来麻烦。如果您以后在使用 pinit.js 时遇到困难，请在此处告知我们：

https://github.com/pinterest/widgets/