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!阅读原文】。感谢您的支持!

您可能感兴趣的

Transforming Multipart/Form-Data Into XML Using Mu... In this article, I'll discuss how to transform multipart/form-data in MuleSoft using JavaScript. I have been going thr...
Get the calling class in JavaScript Get the caller ID in JavaScript / JQuery I've created an AjaxMethod (a very general...
JS函数节流防抖 在前端开发中有一部分的用户行为会频繁的触发事件执行,而对于DOM操作、资源加载等耗费性能的处理,很可能导致界面卡顿,甚至浏览器的崩溃。函数节流(throttle)和函数防抖(debounce)就是为了解决类似需求应运而生的。 ...
(译)React是如何区分Class和Function? 一起来看下这个 function 类型的 Greeting 组件: function Greeting() { return

Hello

; } 复制代码 React 同样支持将它...
Python之爬虫学习 最近想做一个关于爬虫的项目,就学了一下Python爬虫方面的,把《Python Web Scraping 2nd》这本书看完了,内容比较浅,能够了解实现一个爬虫需要涉及哪些方面。以下是整理的思维导图: 书上采用爬...