Twitter Embedded Timeline Callback

综合技术 2017-12-31 阅读原文

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!

责编内容by:Hello, buddy!阅读原文】。感谢您的支持!

您可能感兴趣的

A speed comparison between web grids for ASP.NET When creating web apps, the responsiveness of your app should be priority 1, 2, and 3. If your app spends a minute ...
Javascript: await looks synchronous but it is asyn... What is going to be the output about this javascript snippet? Will the Now be printed before of after the After...
SpaceAce 了解一下,一个新的前端状态管理库... 开发前端应用的大家都知道,状态管理是开发中最重要,最具挑战性的一部分。目前流行的基于组件的视图库,如 React,包括功能齐全的(最基本的)状态管理能力。它们使应用中的每个组件都能够管理自己的状态。这对于小型应用程序来说足够了,但你很快就会...
Six Reasons I Chose Gatsby Spoiler alert: I’m a big fan of Gatsby. I’ve worked with it multiple times and I’m continually impressed with its po...
Generating CSS Grid Layout From Plain Text Using J... Generating CSS Grid Layout From Plain Text Using JavaScript and CSS Variables ...