Twitter嵌入式时间线回调

Question

我一直在对Twitter的嵌入式时间表进行大量研究.我一直试图弄清楚是否可以知道时间线何时完成加载并显示在页面上.此问题已被要求,但尚未实施.我已经走到了尽头,希望有人能够帮助我找到解决方案.这是我到目前为止所发现的:

添加嵌入式时间轴的代码:

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

脚本运行时会发生什么:

1. 该脚本使用元素替换<a>标记<iframe>.

2. iframe准备好的内容,但是头像图像和'关注@username'按钮没有完成下载.将iframe的height属性设置为0,这样你就不会看到一个没有图像内容.

3. 下载了头像图像,但是"关注@username"按钮仍在下载.内容仍然不可见.

4. 'follow @username'按钮已完成下载.将iframe的height属性设置为匹配的内容的高度iframe.时间轴现在可见.

现在,我已经尝试了我能想到的所有内容,以确定时间线何时可见(不使用settimeout/interval).目标是进行非轮询事件/函数/回调.以下是我迄今为止没有成功的尝试:

• 设置在事件侦听器iframe(如onload,DOMContentLoaded,DOMFrameContentLoaded,等),要知道当内容加载完毕.这iframe没有用,因为没有src属性.在浏览了uglified代码后(我无法找到未压缩的版本),我的猜测是它正在使用写入将内容添加到主体中iframe.
• 设置事件侦听器以了解height属性何时更改iframe.从理论上讲,此事件应该触发三次:第一次加载内容时,第二次height设置为0时,第三次height设置为显示完全加载的时间线时.但是,我只能让前两个案件的事件发生,而第三个案件(我实际想要的那个)从来没有.我用过DOMSubtreeModified,onreadystatechange和onpropertychange,但只是DOMSubtreeModified用来解雇这个事件.
• 在cotents上设置事件监听器iframe.因为JavaScript可以iframe从Twitter 内部到达,所以可以抓取其中的任何元素iframe(例如document或window).然而,增加onload,DOMContentLoaded或DOMFrameContentLoaded对事件侦听器window或document的iframe仍然不火的事件.
• 在"关注@username"按钮上设置事件侦听器.该按钮实际上是一个iframe具有src属性的按钮.通过设置onload事件,它将在加载时被触发.但是,该onload事件将始终触发两次.第一次完成下载,第二次完成处理.在第二次触发后立即显示时间线.实现这一点非常黑客(我想一切都是),因为你必须等待iframe加载的内容,到达内部并获得'follow @username' iframe,onload在其上设置一个事件,然后等待第二个事件到火.
• 使用该twttr.widgets.createTimeline()函数,该函数具有回调的可选参数.但是,当内容准备好时(步骤2)调用回调,而不是当iframe可见时调用(步骤4).

在这一点上我可能忘记了一些组合.我知道存在一个使用Twitter 的github要点widget.js,但增加了回调.我无法让这个工作.

对不起,日志问题,但我希望有人能够提供帮助.谢谢.

Answer 1

当您复制并粘贴从Twitter获得的代码时,您必须替换它:

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

有了这个:

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

当然,上面调用的doSomething函数是在嵌入式时间轴加载和渲染时运行的回调函数.

此外,我想这个解决方案在Internet Explorer中不起作用,因为它不支持脚本元素的onLoad事件.然而,有解决方案.

最后,您可以在我编写的Twitter嵌入式时间线刮刀中看到我对此问题的处理方法.

Answer 2

我要在这里发布我的解决方案,即使它是1个月以防万一有人再次发现这个帖子,我要做的是轮询,直到iframe的宽度> 1作为回调的指标

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);
}