Question

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

iframe动态替换twitter的时间轴a-link
jquery-ui效果强制iframe重新加载内容
similar question

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-ui以避免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（）调用更新函数。在此功能中，您可以删除现有的Twitter iframe（在加载时创建），并将其替换为原始链接。完成此操作后，只需调用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);
    });

有图片的推文可能需要一些时间才能加载。

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

2 个答案: