当前位置：文江博客话题详情

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

发布于 2024-12-09 04:22:15 字数 274 浏览 2 评论 0原文

我正在使用活动源的 html5 嵌入代码，如下所示：

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

我希望 Facebook 活动流“填充”它的封闭框。该封闭框的大小是可调整的，因此当调整封闭框的大小时，我需要调整该活动流的大小。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

恰似旧人归 2024-12-16 04:22:15

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);
    }
});

Activity Feed plugin use an iframe for rendering and it is not possible to resize it with pure CSS. However with javascript you can resize the plugin by reloading the iframe with the correct height as a parameter. It is a faster method then parsing again the XFBML tag.

CSS (to make sure the plugin elements follow the container size)

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

Javascript (using 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);
    }
});

回复收藏 0 原文

~没有更多了~