Twitter Embedded Timeline Callback

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:


!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");

What happens when the script is run:

  1. The script replaces the
    tag with an
    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:

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.

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

!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");

With this:

!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");

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
.

Hello, buddy!责编内容来自:Hello, buddy! (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Twitter Embedded Timeline Callback

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录