13

I've been doing a lot of research into Twitter's Embedded Timelines. I've been trying to figure out if it is possible to know when the timeline is finished loading and displays on the page. This issue has been requested, but has yet to be implemented. I have come to a dead end an am hoping someone is able to help me find the solution. Here is what I have found so far:

The code to add an Embedded Timeline:

<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>

What happens when the script is run:

  1. The script replaces the <a> tag with an <iframe> element.

  2. The contents of the iframe are ready, but the avatar image and the 'follow @username' button are not done downloading. The iframe's height attribute is set to 0 so that you don't see the content without the images.

  3. The avatar image is downloaded, but the 'follow @username' button is still downloading. Content is still not visible.

  4. The 'follow @username' button is finished downloading. The iframe's height attribute is set to match the height of the contents of the iframe. The timeline is now visible.

Now, I've tried everything I can think of to figure out when the timeline is visible (without using settimeout/interval). The goal is to have a non-polling event/function/callback. Here is what I have tried so far without success:

  • Setting event listeners on the iframe (such as onload, DOMContentLoaded, DOMFrameContentLoaded, etc) to know when the content has finished loading. This doens't work becuase the iframe has no src attribute. After going through the uglified code (I was unable to find an uncompressed version), my guess is that it is using writes to add the content to the body of the iframe.
  • Setting event listeners to know when the height attribute changes on the iframe. Theoretically, this event should fire three times: first when the content loads, second when the height is set to 0, and third when the height is set to show the fully loaded timeline. However, I was only able to get the event to fire for the first two cases and never for the third (the one I actually wanted). I used DOMSubtreeModified, onreadystatechange, and onpropertychange, but only DOMSubtreeModified worked for firing the event.
  • Setting event listeners on the cotents of the iframe. Because JavaScript can reach inside of the iframe from Twitter, it is possible to grab any element inside the iframe (such as document or window). However, adding onload, DOMContentLoaded, or DOMFrameContentLoaded event listeners on the window or document of the iframe still does not fire those events.
  • Setting event listeners on the 'follow @username' button. The button is actually an iframe that does have a src attribute. By setting an onload event, it will get fired when it is loaded. However, the onload event will always fire twice. The first time when it has finished downloading and the second when it has finished processing. Immediatly after the second trigger, the timeline will be shown. To implement this is quite the hack though (I guess everything is) since you must wait for the contents of the iframe to load, reach inside and get the 'follow @username' iframe, set an onload event on it, then wait for the second event to fire.
  • Using the twttr.widgets.createTimeline() function, which has an optional parameter for a callback. However, the callback is called when the content is ready (step 2), but not when the iframe is visible (step 4).

There's probably a few more combinations I forgot at this point. I know there exists a github gist that uses the Twitter widget.js, but adds callbacks to it. I was unable to get this to work.

Sorry for the log question, but I hope someone is able to help. Thanks.

Steven Lambert
  • 5,571
  • 2
  • 29
  • 46

3 Answers3

11

I'm gonna post my solution here even if it's been 1month just in case someones finds this post again, what I had to do was to poll until the iframe had a width > 1 as an indicator for callback

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);
}
bryanbraun
  • 3,025
  • 2
  • 26
  • 38
Elyx0
  • 349
  • 2
  • 10
  • 1
    Depending on what you're trying to do, checking the width might not work, if this happens, try checking the value of the height instead. I had to do this for my thing to work. – rclai Apr 22 '14 at 01:21
10

When you copy and paste the code you get from Twitter, you have to replace this:

<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>

With this:

<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>

Of course, the doSomething function called above is your callback that runs when your embedded timeline loads and renders.

Also, I guess this solution doesn't work in Internet Explorer since it doesn't support onLoad events for script elements. Yet there are solutions for that.

Last, you can see my approach to this issue in the Twitter embedded timeline scraper I wrote.

Community
  • 1
  • 1
Joomy Korkut
  • 514
  • 1
  • 5
  • 15
  • How does that scraper work? I took a look, and you are accessing the content of an IFrame from another domain via script, which causes security errors. It's a cool idea, I was just wondering if you did something extra to get around that. – Andy May 13 '14 at 15:03
  • @Andy , the scraper doesn't try to access an IFrame from another domain. Twitter widget includes a script that creates an IFrame dynamically, but it doesn't load it directly from another domain, so you don't get any security errors when you try to scrape it. – Joomy Korkut May 13 '14 at 21:08
  • I didn't know about the `twttr.events.bind`. It seems to fire at the correct time too. For anyone else wondering about what events are bindable, you can find info about all events here: https://dev.twitter.com/docs/tfw/events. Also, only IE8 and below didn't support onload events for scripts. IE9+ does (see http://pieisgood.org/test/script-link-events/). – Steven Lambert Jun 24 '14 at 18:33
3

You could try using the Javascript factory instead of attribute binding. The createTimeline method returns a promise so you can chain your post load activities there. See the twitter documentation: https://dev.twitter.com/web/embedded-timelines/parameters

twttr.widgets.createTimeline(
    "YOUR-WIDGET-ID-HERE",
    document.getElementById("container"),
    {
        height: 400,
        chrome: "nofooter",
        linkColor: "#820bbb",
        borderColor: "#a80000"
    }
)
.then(function(){
      DoSomething();
});
crispybits
  • 31
  • 1