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

您可能感兴趣的

Get error in error.js I am getting an error in error.js- under repo AppdataRoamingnpmnode_modulespro...
javascript设计模式——适配器模式 前面的话 适配器模式的作用是解决两个软件实体间的接口不兼容的问题。使用适配器模式之后,原本由于接口不兼容而不能工作的两个软件实体可以一起工作。适配器的别名是...
How to Create an Optional Dynamic Validation Schem... Intro Yup is a JavaScript object schema validator and object parser inspired ...
Advent of Code Day 20–The Long Run Today’s Advent of Code puzzle gave us details of some “particles”, each wit...
20170617 前端开发日报 前端工程化总结; Vue +webpack搭建单文件应用和多文件应用webpack.config.js的写法区别; JavaScript 最新特...