7

我有一个包含 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

4 回答 4

5

Pinterest 按钮也有类似的问题。原来是 Pinterest 的 pinit.js 脚本有问题。

我已经向 Pinterest 报告了这个问题（需要登录），他们正在查看它。

我们在一个页面上使用了 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) 中的错误。

为了更容易地跟踪错误，我取消了 https://assets.pinterest.com/js/pinit.js 。它出现在 unminified 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已分配给点击事件起源的元素。<span>在我们的例子中，那是<a>. 然而，由于我们的 JavaScript 用文本替换了<a>标签的内容，<span>不再是文档的一部分，因此不再有parentNode.

从而b = b.parentNode造成b的价值为null。

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

parentNode（我对 Pinterest 脚本的理解不够深入，无法知道最好的修复方法是什么，但它是在假设点击事件的源始终具有）。

于 2013-03-25T13:58:23.780 回答
2

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

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

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

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

于 2013-03-15T21:08:24.137 回答
1

We were having the same issue using jQuery Modal. We solved the problem by adding an onHide handler that hid the modal window, waited a few seconds, and then deleted the modal window. Not the prettiest solution, but it worked.

于 2013-06-25T20:12:08.307 回答
1

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

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

于 2013-07-02T22:03:36.787 回答