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脚本存在问题。

我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，因此证明，这不是一个安全的假设。）

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替换为data-pin-aha

，这也可以解决OP的问题

Answer 3

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

Answer 4

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

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

Pinterest与Fancybox之间的冲突

4 个答案: