Pinterest与Fancybox之间的冲突

时间:2012-12-06 22:09:12

标签: javascript fancybox fancybox-2 pinterest

我有一个包含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的普通内联脚本标签,但是得到了同样的错误。

有没有人见过这个错误并知道如何修复它?

4 个答案:

答案 0 :(得分:5)

我在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)出错。

unminified 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,因此证明,这不是一个安全的假设。)

答案 1 :(得分: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替换为data-pin-aha

,这也可以解决OP的问题

答案 2 :(得分:1)

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

答案 3 :(得分:1)

今天要解决这个问题;很抱歉这个麻烦。如果您将来遇到pinit.js的困难,请在这里告诉我们:

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