13

私は、Twitter の埋め込みタイムラインについて多くの調査を行ってきました。タイムラインの読み込みが完了してページに表示されるタイミングを知ることができるかどうかを調べようとしています。この問題はリクエスト済みですが、まだ実装されていません。私は行き止まりになりました。誰かが解決策を見つけるのを手伝ってくれることを願っています。これが私がこれまでに見つけたものです：

埋め込みタイムラインを追加するコード:

<a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="YOUR-    WIDGET-ID-HERE">Tweets by @twitterapi</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

スクリプトを実行するとどうなるか:

  1. <a>スクリプトは、タグを<iframe>要素に置き換えます。

  2. のコンテンツiframeは準備できていますが、アバター画像と「@username をフォロー」ボタンのダウンロードが完了していません。の属性は 0 に設定されてiframeいるheightため、画像なしではコンテンツは表示されません。

  3. アバター画像はダウンロードされますが、「@username をフォロー」ボタンはまだダウンロード中です。コンテンツはまだ表示されません。

  4. 「@ユーザー名をフォロー」ボタンのダウンロードが完了しました。の属性は、 のコンテンツの高さと一致するように設定されていiframeます。タイムラインが表示されるようになりました。heightiframe

今、タイムラインがいつ表示されるかを把握するために考えられるすべてのことを試しました（settimeout / intervalを使用せずに）。目標は、非ポーリング イベント/関数/コールバックを持つことです。これまでに成功せずに試したことは次のとおりです。

  • 、、iframeなどのイベント リスナーを設定して、コンテンツの読み込みがいつ完了したかを認識します。には属性がないため、これは機能しません。醜いコードを調べた後 (圧縮されていないバージョンを見つけることができませんでした)、書き込みを使用してコンテンツを.onloadDOMContentLoadedDOMFrameContentLoadediframesrciframe
  • heightで属性が変更されたときにイベント リスナーを設定しますiframe。理論的には、このイベントは 3 回発生する必要があります。1 回目はコンテンツの読み込み時、2 回目heightは が 0 に設定されたとき、3回目heightは が完全に読み込まれたタイムラインを表示するように設定されたときです。ただし、最初の 2 つのケースでしかイベントを発生させることができず、3 番目のケース (実際に必要だったケース) では発生しませんでした。DOMSubtreeModified、onreadystatechange、およびを使用しましたが、イベントを発生させるためonpropertychangeだけに機能しました。DOMSubtreeModified
  • のコンテンツにイベント リスナーを設定しiframeます。JavaScript は Twitter から の内部に到達できるため、 ( や など)iframe内の任意の要素を取得できます。ただし、、、またはイベント リスナーをまたはに追加しても、これらのイベントは発生しません。iframedocumentwindowonloadDOMContentLoadedDOMFrameContentLoadedwindowdocumentiframe
  • 「@username をフォロー」ボタンにイベント リスナーを設定します。ボタンは、実際には属性iframeを持つです。srcイベントを設定するonloadことで、ロード時に発火します。ただし、onloadイベントは常に 2 回発生します。1 回目はダウンロードが完了したとき、2 回目は処理が完了したときです。2 回目のトリガーの直後に、タイムラインが表示されます。ただし、これを実装するにはかなりのハックです (すべてそうだと思います) の内容がiframe読み込まれるのを待ち、内部に到達して 'follow @username' を取得し、それにイベントをiframe設定onloadしてから、2 番目のイベントが実行されるのを待つ必要があるためです。火。
  • twttr.widgets.createTimeline()コールバック用のオプションのパラメーターを持つ関数を使用します。ただし、コールバックはコンテンツの準備ができたとき (手順 2) に呼び出されますが、iframe が表示されるとき (手順 4) には呼び出されません。

この時点で忘れていた組み合わせが他にもいくつかあるはずです。Twitter を使用するgithub gistが存在することは知っていwidget.jsますが、それにコールバックを追加します。これを機能させることができませんでした。

ログの質問で申し訳ありませんが、誰かが助けてくれることを願っています。ありがとう。

4

3 に答える 3

11

誰かがこの投稿を再び見つけた場合に備えて、1か月経ってもここにソリューションを投稿します。コールバックのインジケーターとしてiframeの幅が1を超えるまでポーリングする必要がありました

if ($('.twitter-timeline').length) {
    //Timeline exists is it rendered ?
    interval_timeline = false;
    interval_timeline = setInterval(function(){
        console.log($('.twitter-timeline').width());
        if ($('.twitter-timeline').hasClass('twitter-timeline-rendered')) {
            if ($('.twitter-timeline').width() > 10) {
                //Callback
                clearInterval(interval_timeline);
                DoWhatEverYouNeedHere();
            }     
        }
    },200);
}
于 2013-08-22T20:54:28.913 に答える
10

Twitter から取得したコードをコピーして貼り付ける場合は、これを置き換える必要があります。

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

これとともに：

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";js.setAttribute('onload', "twttr.events.bind('rendered',function(e) {doSomething()});");fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

もちろん、上記で呼び出された doSomething 関数は、埋め込まれたタイムラインが読み込まれてレンダリングされるときに実行されるコールバックです。

また、スクリプト要素の onLoad イベントをサポートしていないため、このソリューションは Internet Explorer では機能しないと思います。しかし、それには解決策があります。

最後に、私が書いた Twitter 埋め込みタイムライン スクレイパーで、この問題に対する私のアプローチを確認できます。

于 2014-02-27T19:18:36.410 に答える