Question

我在Widgetized 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＆amp; 4上应用appendTo，因为我正在使用CSS媒体查询来让它们在其他所有内容的最后以正确的方式浮动。）

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

当浏览器窗口小于768px并且所有内容都停留在一列时，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）并且似乎使用沙盒，如果这会影响任何答案。

Answer 1

感谢阿尔瓦罗的轻推;是的，我终于解决了问题！我使用了以下代码：

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的变通方法，并不是必需的，或者在其他情况下会被替换。

当我在父母身上使用appendTo时，Twitter IFRAME会丢失

1 个答案: