Twitter时间线小部件在jquery切换效果之后重置iframe内容。

Question

在搜索和分析DOM之后，我发现：

• iframe动态替换twitter的时间线a-link
• jquery-ui效果强制iframe重新加载内容
• 相似问题

小提琴手

html

click here to start toggle
<div id="panel">
<a id="twitter-widget" class="twitter-timeline" href="https://twitter.com/search?    q=%23Globallogic" data-widget-id="418408420543184896">#Globallogic</a>
</div>

css

#panel {
    background:gray;
    width:640px;
    height:512px;
}

js

!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");
$( window ).mousedown(function() {
    $( "#panel" ).toggle( "slide", { direction: "left" }, 1000 );
});

是否可以配置jquery以避免iframe重新加载？还有任何其他建议我也很感激。

Answer 1

您可以使用以下代码重新加载twitter小部件的内容：

twttr.widgets.load()

一定要在小部件最初加载之后运行它，否则它会抛出一个错误。

Answer 2

我刚刚遇到了这个问题，我通过动态地将子元素加载到面板并要求twitter加载小部件来解决这个问题。要做到这一点，如果下面是您的twitter div那么

  <div id="panel">
    <a id="twitter-widget" class="twitter-timeline"          href="https://twitter.com/search?q=%23Globallogic" 
     data-widget-id="418408420543184896">#Globallogic</a>
    </div>

请使用脚本标记将下面的java脚本放置在任何地方。

           window.twttr = (function (d, s, id) {
           var js, fjs = d.getElementsByTagName(s)[0],
           t = window.twttr || {};
           if (d.getElementById(id)) return t;
           js = d.createElement(s);
           js.id = id;
           js.src = "https://platform.twitter.com/widgets.js";
           fjs.parentNode.insertBefore(js, fjs);
           t._e = [];
           t.ready = function (f) {
           t._e.push(f);
           };return t;
           }(document, "script", "twitter-wjs"));

使用setInterval()调用update函数。在这个函数中，您可以删除现有的twitter (在加载时创建)，并将其替换为原始链接。完成之后，只需调用twttr.widgets.load()就是twitter给出的标准事件

 $(function(){

    function updateStatus(){
      var $twitter = $("#panel");
      $twitter.append(" <a id='twitter-widget' 
     class='twitter-timeline' href='https://twitter.com/search?  
    q=%23Globallogic' data-widget-   id='418408420543184896'>#Globallogic</a>");
    twttr.widgets.load();
    };
    setInterval(function(){updateStatus()}, 1000);
    });

包含图片的Tweets可能需要一些时间来加载。