分析のために追跡したいページに複数のボタン (ツイート、共有...) があります。ボタンAがボタンBよりも優れているかどうか知りたい:)
ボタンは「オンデマンド」で読み込まれます。特定の div にカーソルを合わせるか、しばらくしてからです。私はパフォーマンス上の理由でそれを行います。毎回DOM全体を解析したくありません。
https://dev.twitter.com/docs/intents/eventsで説明されているように、Twitter ウィジェット ライブラリの twttr.widgets.createXXX 関数を使用します。
それまではすべてうまくいきます。
しかし、指定されたイベントにコールバック関数をバインドすると、提供されたコールバック データは空であるか、ほとんどありません。ボタンの種類はありますが、イベントと元のターゲットに関するその他の情報はありません。
window.twttr オブジェクトの内部を調べて、最後のイベントまたはさまざまな iframe に関連する情報を作成しました。
問題を説明するために作成したjsfiddleは次のとおりです。http://jsfiddle.net/3fFFf/
<div id="btnContainer1" class="btn not-activated">Button container 1</div>
<div id="btnContainer2" class="btn not-activated">Button container 2</div>
<script>
// Loading the twitter library
twttr = (function (d,s,id) { var t, js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } }); }(document, "script", "twitter-wjs"));
twttr.ready(function(twttr) {
// I only want to load the tweet button when the divs are hovered
$(document).on("mouseenter", ".btn.not-activated", function(e){
var $div = $(this);
$div.removeClass("not-activated").text("");
twttr.widgets.createShareButton(
"http://twitter.com",
$div[0],
function(el) {}, // loaded callback
{ // Options
lang: "en",
text: "hey, share this great site !",
via: "me",
count: "none"
});
})
// A click occured on a twitter button
twttr.events.bind('click', function(e){
alert("e.target should by a node or something, but is : "+e.target)
});
});
</script>
ご協力ありがとうございました !