Twitter嵌入式时间线回调 [英] Twitter Embedded Timeline Callback

问题描述

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

I've been doing a lot of research into Twitter's Embedded Timelines. I've been trying to figure out if it is possible to know when the timeline is finished loading and displays on the page. This issue has been requested, but has yet to be implemented. I have come to a dead end an am hoping someone is able to help me find the solution. Here is what I have found so far:

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

The code to add an Embedded Timeline:

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

运行脚本时会发生什么：

What happens when the script is run:

1. 该脚本用< iframe> < a> 标记$ c>元素。

1. The script replaces the <a> tag with an <iframe> element.

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

The contents of the iframe are ready, but the avatar image and the 'follow @username' button are not done downloading. The iframe's height attribute is set to 0 so that you don't see the content without the images.

已下载头像图片，但关注@username按钮仍在下载。内容仍然不可见。

The avatar image is downloaded, but the 'follow @username' button is still downloading. Content is still not visible.

关注@username按钮已完成下载。 iframe 的 height 属性设置为与 iframe内容的高度相匹配。现在可以看到时间轴了。

The 'follow @username' button is finished downloading. The iframe's height attribute is set to match the height of the contents of the iframe. The timeline is now visible.

现在，我已经尝试了一切我能想到的时间线是可见的（没有使用settimeout / interval）。目标是进行非轮询事件/函数/回调。以下是我迄今为止没有成功的尝试：

Now, I've tried everything I can think of to figure out when the timeline is visible (without using settimeout/interval). The goal is to have a non-polling event/function/callback. Here is what I have tried so far without success:

• 在 iframe上设置事件监听器（例如 onload ， DOMContentLoaded ， DOMFrameContentLoaded ，等）知道内容何时完成加载。这不起作用，因为 iframe 没有 src 属性。经过uglified代码（我无法找到未压缩的版本）后，我的猜测是它使用写入将内容添加到 iframe 的主体。 / li>
  
• 设置事件侦听器以了解 height 属性何时在 iframe 上发生更改。从理论上讲，此事件应该触发三次：第一次加载内容时，第二次是 height 设置为0，第三次是 height 设置为显示完全加载的时间轴。但是，我只能让前两个案件的事件发生，而第三个案件（我实际想要的那个）从来没有。我使用 DOMSubtreeModified ， onreadystatechange 和 onpropertychange ，但仅限于 DOMSubtreeModified 用于触发事件。


• 在 iframe 。因为JavaScript可以从Twitter中到达 iframe 内部，所以可以抓取 iframe 中的任何元素（例如 document 或 window ）。但是，添加 onload ， DOMContentLoaded 或 DOMFrameContentLoaded 事件侦听器在窗口或文件的 iframe 仍然没有触发那些事件。


• 在'follow @username'按钮上设置事件监听器。该按钮实际上是 iframe ，它具有 src 属性。通过设置 onload 事件，它将在加载时被触发。但是， onload 事件将始终触发两次。第一次完成下载，第二次完成处理。在第二次触发后立即显示时间线。实现这一点非常黑客（我想一切都是），因为你必须等待 iframe 的内容加载，到达内部并获得'follow @username' iframe ，在其上设置 onload 事件，然后等待第二个事件触发。


• 使用 twttr.widgets.createTimeline（）函数，该函数具有回调的可选参数。但是，当内容准备就绪时会调用回调（步骤2），但是当iframe可见时（步骤4）则不会调用回调。

• Setting event listeners on the iframe (such as onload, DOMContentLoaded, DOMFrameContentLoaded, etc) to know when the content has finished loading. This doens't work becuase the iframe has no src attribute. After going through the uglified code (I was unable to find an uncompressed version), my guess is that it is using writes to add the content to the body of the iframe.
• Setting event listeners to know when the height attribute changes on the iframe. Theoretically, this event should fire three times: first when the content loads, second when the height is set to 0, and third when the height is set to show the fully loaded timeline. However, I was only able to get the event to fire for the first two cases and never for the third (the one I actually wanted). I used DOMSubtreeModified, onreadystatechange, and onpropertychange, but only DOMSubtreeModified worked for firing the event.
• Setting event listeners on the cotents of the iframe. Because JavaScript can reach inside of the iframe from Twitter, it is possible to grab any element inside the iframe (such as document or window). However, adding onload, DOMContentLoaded, or DOMFrameContentLoaded event listeners on the window or document of the iframe still does not fire those events.
• Setting event listeners on the 'follow @username' button. The button is actually an iframe that does have a src attribute. By setting an onload event, it will get fired when it is loaded. However, the onload event will always fire twice. The first time when it has finished downloading and the second when it has finished processing. Immediatly after the second trigger, the timeline will be shown. To implement this is quite the hack though (I guess everything is) since you must wait for the contents of the iframe to load, reach inside and get the 'follow @username' iframe, set an onload event on it, then wait for the second event to fire.
• Using the twttr.widgets.createTimeline() function, which has an optional parameter for a callback. However, the callback is called when the content is ready (step 2), but not when the iframe is visible (step 4).

在这一点上，我可能会忘记更多的组合。我知道有一个 github gist 使用Twitter widget.js ，但添加了回调。我无法让它工作。

There's probably a few more combinations I forgot at this point. I know there exists a github gist that uses the Twitter widget.js, but adds callbacks to it. I was unable to get this to work.

对于日志问题很抱歉，但我希望有人能够提供帮助。谢谢。

Sorry for the log question, but I hope someone is able to help. Thanks.

推荐答案

当您复制并粘贴从Twitter获得的代码时，您必须将其替换为：

When you copy and paste the code you get from Twitter, you have to replace this:

<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函数是在嵌入式时间轴加载和渲染时运行的回调函数。

Of course, the doSomething function called above is your callback that runs when your embedded timeline loads and renders.

另外，我猜这个解决方案在Internet Explorer中不起作用，因为它不支持脚本元素的onLoad事件。 然而，有针对此的解决方案。

Also, I guess this solution doesn't work in Internet Explorer since it doesn't support onLoad events for script elements. Yet there are solutions for that.

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

这篇关于Twitter嵌入式时间线回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！