回调

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的内容已经准备好了，但是头像和“跟随@用户名”按钮还没有下载。iframe的height属性设置为0，这样就不会在没有图像的情况下看到内容。
3. 阿凡达图像已经下载，但“跟随@用户名”按钮仍在下载中。内容仍然不可见。
4. “跟踪@用户名”按钮已经下载完毕。iframe的height属性设置为与iframe内容的高度相匹配。时间线现在可见。

现在，我已经尝试了我能想到的所有东西来确定时间线何时是可见的(而不使用settimeout/interval)。目标是有一个非轮询事件/函数/回调。以下是我迄今尝试但未获成功的方法：

• 在iframe上设置事件侦听器(如onload、DOMContentLoaded、DOMFrameContentLoaded等)，以了解内容何时完成加载。这不起作用，因为iframe没有src属性。在浏览了丑陋的代码(我无法找到未压缩的版本)之后，我的猜测是它使用写将内容添加到iframe的主体中。
• 设置事件侦听器以了解height属性何时在iframe上更改。理论上，这个事件应该触发三次:第一次是在内容加载时，第二次是当height设置为0时，第三次是当height被设置为显示满载时间线时。然而，我只能让事件发生在前两个案件，而从来没有为第三个(一个我真正想要的)。我使用了DOMSubtreeModified、onreadystatechange和onpropertychange，但只有DOMSubtreeModified负责触发事件。
• 在iframe的组件上设置事件侦听器。因为JavaScript可以从Twitter到达iframe内部，所以可以抓取iframe中的任何元素(比如document或window)。但是，将onload、DOMContentLoaded或DOMFrameContentLoaded事件侦听器添加到iframe的window或document中仍然不会触发这些事件。
• 在“跟踪@username”按钮上设置事件侦听器。该按钮实际上是一个具有iframe属性的src。通过设置一个onload事件，它将在加载时被触发。但是，onload事件总是会触发两次。第一次是完成下载，第二次是完成处理。在第二个触发器之后立即显示时间线。但是要实现这一点(我猜一切都是这样)，因为您必须等待iframe的内容加载、到达内部并获得‘you @username’iframe，在其上设置一个onload事件，然后等待第二个事件触发。
• 使用twttr.widgets.createTimeline()函数，该函数具有回调的可选参数。但是，回调是在内容准备好时调用的(步骤2)，而不是在iframe可见时调用(步骤4)。

在这一点上，可能还有几个组合我忘了。我知道有一个使用Twitter widget.js的github gist，但它添加了回调。我没能让这件事起作用。

很抱歉有日志问题，但我希望有人能帮上忙。谢谢。

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函数是在加载和呈现嵌入时间线时运行的回调函数。

而且，我想这个解决方案在中不起作用，因为它不支持脚本元素的onLoad事件。但这是有解决办法的。

最后，您可以在我写的推特嵌入时间线刮板中看到我处理这个问题的方法。

Answer 2

我要在这里张贴我的解决方案，即使已经过了一个月，以防有人再次发现这篇文章，我要做的就是投票，直到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);
}