我可以动态调整 Facebook Activity Stream 插件的大小吗？答案

【问题标题】：Can I dynamically resize the Facebook Activity Stream plugin?我可以动态调整 Facebook Activity Stream 插件的大小吗？
【发布时间】：2012-07-05 10:53:10
【问题描述】：

我正在使用此处记录的 Activity Feed 的 html5 嵌入代码：

http://developers.facebook.com/docs/reference/plugins/activity/

我希望 Facebook 活动流“填充”它的封闭框。这个封闭框是可调整大小的，所以我需要在调整封闭框大小时调整该活动流的大小。

【问题讨论】：

标签： facebook autoresize

【解决方案1】：

Activity Feed 插件使用 iframe 进行渲染，无法使用纯 CSS 调整其大小。但是，使用 javascript，您可以通过使用正确的高度作为参数重新加载 iframe 来调整插件的大小。这是一种比再次解析 XFBML 标记更快的方法。

CSS（确保插件元素遵循容器大小）

.fb-activity, .fb-activity * {
    position:relative !important;
    width:100% !important;
    height:100% !important;
}

Javascript（使用 jQuery）

$(window).resize(function() {

    //Calculate the new height of your container
    //...

    var $container = $('.container');
    var $iframe = $container.find('iframe');
    $container.css('height',containerHeight+'px');
    if($iframe.length) {
        $iframe.attr('src',$iframe.attr('src').replace(/height=[0-9]+/gi,'height='+escape(containerHeight)));
    } else {
        $container.find('.fb-activity').attr('data-height',containerHeight);
    }
});

【讨论】：