javascript - Twitter 嵌入式时间线回调

Question

我一直在对 Twitter 的嵌入式时间线进行大量研究。我一直试图弄清楚是否有可能知道时间线何时完成加载并显示在页面上。此 issue has been requested ，但尚未实现。我走到了死胡同，希望有人能够帮助我找到解决方案。这是我迄今为止发现的:

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

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

运行脚本时会发生什么:

该脚本替换了 <a>带有 <iframe> 的标签元素。

iframe的内容已准备就绪，但头像图像和“关注@username”按钮尚未下载。 iframe的 height属性设置为 0，这样您就看不到没有图像的内容。

头像已下载，但“关注@用户名”按钮仍在下载。内容仍然不可见。

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

现在，我已经尝试了所有我能想到的方法来确定时间线何时可见(不使用 settimeout/interval)。目标是有一个非轮询事件/函数/回调。这是我迄今为止尝试过但没有成功的方法:

在 iframe 上设置事件监听器(例如 onload 、 DOMContentLoaded 、 DOMFrameContentLoaded 等)了解内容何时完成加载。这不起作用，因为 iframe没有 src属性。经过丑化的代码(我找不到未压缩的版本)后，我的猜测是它正在使用写入将内容添加到 iframe 的正文中。 .

设置事件监听器以了解何时 height iframe 上的属性更改.理论上，这个事件应该触发三次:第一次是在内容加载时，第二次是在 height 时。设置为 0，第三个时 height设置为显示完全加载的时间线。但是，我只能在前两种情况下触发事件，而对于第三种情况(我真正想要的情况)却从未触发过。我用过 DOMSubtreeModified , onreadystatechange , 和 onpropertychange ，但只有 DOMSubtreeModified用于触发事件。

在 iframe 的内容上设置事件监听器.因为 JavaScript 可以到达内部 iframe从 Twitter，可以获取 iframe 中的任何元素。 (例如 document 或 window )。但是，添加 onload , DOMContentLoaded , 或 DOMFrameContentLoaded window 上的事件监听器或 document的iframe仍然不会触发这些事件。

在 'follow @username' 按钮上设置事件监听器。该按钮实际上是一个 iframe确实有 src属性。通过设置 onload事件，它会在加载时被触发。然而，onload事件总是会触发两次。第一次下载完成，第二次处理完成。在第二次触发后，将立即显示时间线。要实现这一点是相当困难的(我猜一切都是这样)，因为你必须等待 iframe 的内容。加载，到达内部并获取“关注@用户名”iframe , 设置一个 onload事件，然后等待第二个事件触发。

使用 twttr.widgets.createTimeline()函数，它有一个可选的回调参数。但是，当内容准备好(第 2 步)而不是在 iframe 可见时(第 4 步)调用回调。

在这一点上，我可能忘记了更多的组合。我知道存在一个 github gist使用 Twitter 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 事件。 Yet there are solutions for that .

最后，您可以在 the Twitter embedded timeline scraper I wrote 中看到我对此问题的处理方法.