获取“Facebook评论”小部件/社交插件的高度 [英] Getting the height of a 'Facebook Comments' widget/social plugin

问题描述

使用Facebook Javascript SDK + XFBML，我正在实施fb的注释小部件，如此处。

<$ p

$ p> < fb：comments href =someurl.comnum_posts =2width =400>< / fb：comments&


使用注释窗口小部件创建iframe。

iframe的高度当然是根据评论的长度;

我需要根据评论窗口小部件的高度更改我的页面。

我可以通过使用

  FB.Event.subscribe （'xfbml.render'）
  

（我发现它比使用'ready' '），
，但由于跨域限制，我无法获取评论的高度iframe。

有没有人知道这种解决方案？

感谢。

编辑：
b $ b解决方法1：（从 http： //startdevelopment.blogspot.com/2011/03/issue-with-facebook-comments-box-height.html ）：

为您的网页添加样式：

  .fb_ltr {height：400px！important; overflow-y：scroll！important; } 
  

'fb_ltr'是iframe使用的类。这将确保它总是400px高，并添加滚动条滚动内容。

解决方案

当然，滚动条是丑陋的，首先，感谢你的解决方案，Yuval A.
第二，我发现一个干净和简单的样式滚动条在这里：
CSS滚动条样式交叉浏览器

总之，这是代码：

  ::  -  webkit-scrollbar {width：12px; / *垂直滚动条* / height：12px; / *水平滚动条* /} ::  -  webkit-scrollbar-track {background：rgba（0，0，0，0.1）; } ::  -  webkit-scrollbar-thumb {background：rgba（0，0，0，0.5）; } 
  

Using Facebook Javascript SDK+XFBML, I'm implementing the fb 'comments widget', as explained here.

then, using the fbml line:

<fb:comments href="someurl.com" num_posts="2" width="400"></fb:comments>

creates an iframe with the comments widget.

The height of the iframe is of-course according to the length of the comments;
I need to make changes to my page according to the height of the comments widget.
I can tap into when the widget has finished loading, by using

FB.Event.subscribe('xfbml.render')

(I found it more accurate than using 'ready' or 'load'), but I cannot get the height of the comments iframe due to cross-domain restrictions.

Does anybody know of some sort of a solution for this?

Thanks.

EDIT:
Workaround number 1: (from http://startdevelopment.blogspot.com/2011/03/issue-with-facebook-comments-box-height.html):

add a style to your page:

.fb_ltr { height: 400px !important; overflow-y: scroll !important; }

'fb_ltr' is the class used by the iframe. This will make sure it's always 400px high, and add scroll-bar to scroll content.
Of-course, the scroll-bar is ugly, so, any other ideas?

解决方案

First of all, thanks for you solution, Yuval A. Second, I found a clean and simple style for scroll bar here: CSS scrollbar style cross browser

In short is this code:

::-webkit-scrollbar {  width: 12px;  /* for vertical scrollbars */  height: 12px; /* for horizontal scrollbars */ } ::-webkit-scrollbar-track {   background: rgba(0, 0, 0, 0.1); } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.5); } 

这篇关于获取“Facebook评论”小部件/社交插件的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！