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

我在Pinterest按钮上遇到了类似的问题.事实证明,Pinterest的pinit.js脚本存在问题.

我已向Pinterest报告此问题(需要登录),他们正在查看它.

我们在页面上使用了Pinterest按钮,其上有另一个链接,并指定了点击事件.粗略地说,链接的HTML是这样的:

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

click事件处理程序是这样的:

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

此单击处理程序以某种方式导致pinit.js(Uncaught TypeError: Cannot read property 'data-pin-log' of null)中的错误.

我明确了 https://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已经分配了click事件源自的元素.在我们的例子中,那是<span>内部的<a>.但是,因为我们的JavaScript <a>用文本替换了标记的内容,所以<span>它不再是文档的一部分,因此不再具有文本parentNode.

因此b = b.parentNode造成了它b的价值null.

我们通过<span>在点击时不删除文档来解决这个问题.但是,如果Pinterest可以添加一个检查以查看是否b.parentNode存在,那将是一件好事.

(我不太了解Pinterest脚本,不知道最好的解决方案是什么,但它的构建假设点击事件的来源总是有一个parentNode,正如这表明,这不是一个安全的假设).

Answer 2

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这也可以通过替换为来解决OP的问题data-pin-aha