7

FancyboxとPinterestのピンボタンの両方があるページがあります。どちらも正常に機能しているようですが、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>クリック時にドキュメントから を削除しないことで、この問題を回避しました。ただし、Pinterest が存在するかどうかを確認するためのチェックを追加できるとよいでしょうb.parentNode。

(私は Pinterest スクリプトをよく理解していないので、最善の修正が何であるかを知ることができませんが、クリック イベントのソースには常に があるという前提で構築されていますparentNode。これは、これが示すように、安全な前提ではありません。 ）。

于 2013-03-25T13:58:23.780 に答える
2

Uncaught TypeError: Cannot read property 'data-pin-log' of nullそのページでエラーが発生しています。

data-pin-logこの問題を修正するハックな方法は、属性を閉じるボタンに追加する afterShow イベントを追加することです。

  $(".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

これに対する修正は今日プッシュされています。大変申し訳ございません。今後、pinit.js で問題が発生した場合は、こちらからお知らせください。

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

于 2013-07-02T22:03:36.787 に答える
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 に答える