Twitter嵌入式时间线回调

Twitter Embedded Timeline Callback

本文关键字：回调 时间线 嵌入式 Twitter      更新时间：2023-09-26

我对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的主体中
  • 将事件侦听器设置为知道iframe上的height属性何时更改。理论上，此事件应激发三次：第一次是在内容加载时，第二次是在height设置为0时，第三次是在将height设置为显示完全加载的时间线时。然而，我只能在前两个案例中启动该活动，而在第三个案例中（我真正想要的案例）从未启动。我使用了DOMSubtreeModified、onreadystatechange和onpropertychange，但只有DOMSubtreeModified可以触发事件
  • 在iframe的小区上设置事件侦听器。因为JavaScript可以从Twitter访问iframe内部，所以可以获取iframe内部的任何元素（例如document或window）。然而，在iframe的window或document上添加onload、DOMContentLoaded或DOMFrameContentLoaded事件侦听器仍然不会激发这些事件
  • 在"follow@username"按钮上设置事件侦听器。该按钮实际上是一个具有src属性的iframe。通过设置onload事件，它将在加载时被激发。但是，onload事件将始终激发两次。第一次当它完成下载时，第二次当它已经完成处理时。在第二次触发之后，将立即显示时间线。不过，要实现这一点非常困难（我想一切都是这样），因为你必须等待iframe的内容加载，进入内部并获得"follow@username"iframe，在上面设置一个onload事件，然后等待第二个事件启动
  • 使用twttr.widgets.createTimeline()函数，该函数具有用于回调的可选参数。但是，当内容准备好时（步骤2）调用回调，但当iframe可见时（步骤4）不调用回调

在这一点上，我可能还忘记了一些组合。我知道有一个github要旨使用了Twitter widget.js，但添加了回调。我无法让它发挥作用。

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

即使已经1个月了，我也会在这里发布我的解决方案，以防有人再次发现这篇文章，我所要做的就是轮询，直到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);
}

当您复制并粘贴从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函数是在加载和渲染嵌入的时间线时运行的回调。

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

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

您可以尝试使用Javascript工厂而不是属性绑定。createTimeline方法返回一个promise，这样您就可以在那里链接加载后的活动。请参阅twitter文档：https://dev.twitter.com/web/embedded-timelines/parameters

twttr.widgets.createTimeline(
    "YOUR-WIDGET-ID-HERE",
    document.getElementById("container"),
    {
        height: 400,
        chrome: "nofooter",
        linkColor: "#820bbb",
        borderColor: "#a80000"
    }
)
.then(function(){
      DoSomething();
});
相关文章：