当我在父级上使用 appendTo 时，Twitter IFRAME 会丢失答案

【问题标题】：Twitter IFRAME gets lost when I use appendTo on parent当我在父级上使用 appendTo 时，Twitter IFRAME 会丢失
【发布时间】：2013-11-28 05:11:11
【问题描述】：

我在一个小部件化的 WordPress 页面中有一个场景，我最初将所有内容加载到一个由六个单独的小部件组成的列中。

当浏览器窗口 >= 768 像素时，我会创建两列：

主列：div #1-4，按顺序
边栏：div #6 后跟 div #5

为了以这种方式重排文档，并且因为我使用了很多动态内容，我一直在使用 jQuery 的appendTo，方法如下：

  jQuery(document).ready(function($) {

  var w = $(window).width();

  $(window).on('load resize', adjustFlow);

  function adjustFlow() {
      if (w >= 768 ) {
          $('#div1').appendTo('#main');
          $('#div2').appendTo('#main');
          $('#div6').appendTo('#sidebar');
           $('#div5').appendTo('#sidebar');
        } else {
           $('#div5').appendTo('#div4');
           $('#div6').appendTo('#div5');
        }
     };

  }); /* end of as page load scripts */

（注意：我不会在 div #3&4 上应用 appendTo，因为我使用 CSS 媒体查询只是为了让它们在其他所有内容的末尾以正确的方式浮动。）

jQuery 正在按预期工作。但是，div #6 包含使用 Twitter 提供的基本代码嵌入的基本 Twitter 时间线 (docs)（即，我没有滚动我自己的自定义查询或任何东西）。

当浏览器窗口小于 768 像素并且所有内容都停留在一列中时，Twitter 时间线就会显示出来……但是当事情开始发生变化时，我的时间线应该在的地方出现一个空 div。我假设移动正在使 Twitter 的 IFRAME 不开心，并试图通过添加来强制 IFRAME 在其他所有内容运行后刷新

$('#twitter-widget-1').attr( 'src', function ( i, val ) { return val; });

在if 和else 语句之后...但行为没有变化。

appendTo 和 IFRAME 玩得不好，我可能是对的吗？知道我可以做些什么来让 IFRAME 跟上我的洗牌 div 吗？

在更多时间工作后编辑：有没有办法让 jQuery 重新洗牌等到 IFRAME 加载或让 IFRAME 加载等到 jQuery 重新洗牌之后？此外，IFRAME 内容是从我的域外加载的（因为它来自 Twitter）并且似乎使用沙盒，如果这会影响任何答案。

【问题讨论】：

你能找到解决办法吗？

标签： jquery iframe responsive-design appendto

【解决方案1】：

感谢您的推动，Alvaro；是的，我终于把事情解决了！我使用了以下代码：

if ($('#tweets iframe').length) {
         $('#tweets iframe').remove();
         callTwitter();
      } else {
         callTwitter();
      }
   };

我将以上内容添加到我原来的 adjustFlow 函数中（顺便说一句，我没有为 DIV 编号，所以#div6 = #tweets）。以下是上述代码中引用的新函数：

   function callTwitter() {
      $('<a class="twitter-timeline" href="https://twitter.com/YrUSERNAME" data-widget-id="YrWIDGETID">Tweets</a>').appendTo('#tweets .textwidget');
      twttr.widgets.load();
   };

我希望这在页面加载时间等方面不是最友好的答案，但我也认为调整浏览器大小以解决这个问题对于大多数用户来说可能是一种极端情况。另请注意，其中的一些细节（例如，上述函数中的“textwidget”类）是 WordPress 解决方法，在其他情况下没有必要或将被替换。

【讨论】：