我一直在对 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>
运行脚本时会发生什么:
该脚本将
<a>
标签替换为一个<iframe>
元素。内容
iframe
已准备就绪,但头像图像和“关注@username”按钮尚未完成下载。的属性设置为 0,这样您就看不到没有图像的内容iframe
。height
头像图片已下载,但“关注@username”按钮仍在下载中。内容仍然不可见。
“关注@username”按钮已完成下载。的属性被设置为匹配
iframe
的height
内容的高度iframe
。时间线现在可见。
现在,我已经尝试了我能想到的一切来确定时间线何时可见(不使用 settimeout/interval)。目标是有一个非轮询事件/函数/回调。这是我迄今为止尝试过的但没有成功的方法:
iframe
在(例如onload
、DOMContentLoaded
、等)上设置事件侦听DOMFrameContentLoaded
器以了解内容何时完成加载。这不起作用,因为iframe
没有src
属性。在浏览了 uglified 代码之后(我找不到未压缩的版本),我的猜测是它正在使用 writes 将内容添加到iframe
.- 设置事件侦听器以
height
了解iframe
. 从理论上讲,这个事件应该触发三次:第一次是在内容加载时,第二次height
是在设置为 0 时,第三次height
是在设置为显示完全加载的时间线时。但是,我只能在前两种情况下触发事件,而在第三种情况下(我真正想要的情况)永远不会触发。我使用DOMSubtreeModified
,onreadystatechange
和onpropertychange
, 但仅DOMSubtreeModified
用于触发事件。 - 在
iframe
. 因为 JavaScript 可以从 Twitter 到达内部iframe
,所以可以抓取内部的任何元素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 gistwidget.js
,但添加了回调。我无法让它工作。
很抱歉日志问题,但我希望有人能够提供帮助。谢谢。