我将为您翻译以下内容,涉及编程和Twitter嵌入式时间轴。请注意,我会尽力使翻译通俗易懂,但不会提供解释或回答问题。
当脚本运行时会发生以下情况:
我一直在研究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
的内容已准备好,但是头像图片和“关注@用户名”按钮尚未下载完毕。iframe
的height
属性设置为0,这样在没有图像的情况下不会看到内容。头像图片已下载完成,但是“关注@用户名”按钮仍在下载中。内容仍然不可见。
“关注@用户名”按钮已完成下载。 将
iframe
的height
属性设置为与iframe
内容的高度相匹配。时间线现在可见。
现在,我已经尝试了我能想到的所有方法来确定时间线何时可见(不使用settimeout/interval)。 目标是具有非轮询事件/函数/回调。到目前为止,我尝试过以下方法但没有成功:
- 在
iframe
上设置事件侦听器(例如onload
,DOMContentLoaded
,DOMFrameContentLoaded
等),以了解内容何时加载完成。这不起作用,因为iframe
没有src
属性。经过查看混淆的代码(我找不到未压缩的版本),我的猜测是它使用写入将内容添加到iframe
的正文中。 - 设置事件侦听器以了解
iframe
上的height
属性何时更改。理论上,此事件应触发三次:首先在内容加载时触发,其次在将height
设置为0时触发,第三次在将height
设置为显示完全加载的时间轴时触发。然而,我只能让事件针对前两种情况触发,而从未为第三种情况(我真正想要的那个)触发。我使用了DOMSubtreeModified
,onreadystatechange
和onpropertychange
,但只有DOMSubtreeModified
在触发事件时起作用。 - 在
iframe
的内容上设置事件侦听器。因为JavaScript可以从Twitter内部进入iframe
,所以可以抓取iframe
内的任何元素(例如document
或window
)。然而,在iframe
的window
或document
上添加onload
,DOMContentLoaded
或DOMFrameContentLoaded
事件侦听器仍未触发这些事件。 - 在“关注@用户名”按钮上设置事件侦听器。该按钮实际上是一个具有
src
属性的iframe
。通过设置onload
事件,它将在加载时触发。但是,onload
事件将始终触发两次。第一次是在下载完成后,第二次是在处理完成后。在第二个触发之后立即,时间轴将显示。不过,要实现这一点相当麻烦(我想一切都是),因为必须等待iframe
的内容加载完成,然后获取“关注@用户名”iframe
,在其上设置onload
事件,然后等待第二个事件触发。 - 使用
twttr.widgets.createTimeline()
函数,其中包含回调的可选参数。但是,当iframe可见时(步骤4),回调会在内容准备就绪(步骤2)时调用,而不是在可见时。
我可能忘记了一些组合。我知道有一个github gist使用Twitter的widget.js
,但添加了回调函数。我无法使其工作。
抱歉问题比较长,但希望有人能够帮助。谢谢。