0

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

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

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

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

  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 */

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

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

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

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

在ifandelse语句之后......但行为没有变化。

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

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

4

1 回答 1

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 解决方法，在其他情况下不是必需的或将被替换。

于 2013-11-27T21:11:11.377 回答