如何单独控制 facebook 之类的框流部分高度。降低整个盒子的高度是正常的，但如果试图控制它，则不会显示风扇图像。
的CSS.fan_box .page_stream{ ...,width:300px}到.fan_box .page_stream{...,width:150px}
我问是因为 iframe 内的流框
问问题
11294 次
7 回答
4
没有办法改变高度。Facebook 没有提供更改高度的方法，也没有使用 JavaScript 和 CSS 更改高度的方法。
为什么我不能用 JavaScript 和 CSS 做到这一点？
CSS 只是不适用于 iFrame，因为这就是 iFrame 的工作方式——它基本上是一个带有自己 CSS 的另一个页面的窗口。
如果 iFrame 的 URL 与包含 iFrame 的页面不同，Javascript 将不允许您访问 iFrame 的内容。正在做：
document.getElementById('iframeID').contentWindow.document
将在 Chrome 中为您提供以下警告。
Unsafe JavaScript attempt to access frame with URL... Domains, protocols and ports must match.
这样做的原因是为了防止 XSS。这里有更多关于同源政策的信息。
于 2011-08-05T17:12:48.937 回答
1
我在 Like Box 页面上看到了这一点，并认为我会回应您可以使用“数据高度”属性：
data-height="250"
为我工作。这是我的例子：
于 2011-09-15T23:57:50.547 回答
1
您可以降低封装 div 的高度，隐藏其溢出，如果您想将其顶部推到具有更高 z-index 的绝对定位元素下方，如下所示：
<div style="position:absolute;z-index:2;top:0;left:0;width:300px;height:130px;background-color:#c0c;opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";"></div>
<div style="height:140px;width:140px;overflow:hidden;background-color:#0c0; margin-top: 60px;color: #fff;padding: 30px;font-family:arial;">
facebook like box goes here - only the green part will be visible if you make the pink box white and take out the 0.5 opacity and the bottom will get cut off so you can just display whatever part you want
</div>
于 2011-10-05T21:58:24.450 回答
0
我环顾四周，因为我遇到了这样的问题。如果检查了面孔和标题，Facebook 没有自定义流的标准方法。
解决方案是采取不同的方式。如果您需要长达 1000 像素的流，只需取消选中除流之外的所有内容。这会将其高度从默认的 300 像素更改为您在高度字段中键入的任何值。
请参见下面的示例：
<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="2000" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="true" data-show-border="true"></div>
然后，如果您仍然需要带有面孔的那个，请获取一个新代码并设置不同的高度，然后取消选中其他。下面是一个例子：
<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="500" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
不要忘记在这些代码之前添加 SDK。
我知道自发布以来已经有很长时间了，但这是今天帮助我的解决方案
于 2014-10-01T21:15:47.743 回答
0
是的，数据高度为 250 将起作用，因为它减少了外部 iframe
现在尝试将 data-height 设置为 1000 - 它仍然是300px高度，
因为 iframe 内的内部 div 硬编码为 300px 并且您无法控制它，因为它在跨域 iframe 中......
于 2015-03-22T00:31:20.143 回答
0
我想你们仍然需要它，这是我能提供的最准确的技巧，它也有望与 Facebook 每天更换的盒子一起工作。
它有点棘手，但对你们有用..
创建两个单独的相同页面的框，并在我的情况下将它们关闭在单独的 div 中
<div class="up1">
facbook like box 1 code
<div class="up2">
facbook like box 2 code
现在在 CSS
使用绝对位置来分类 up1
.up1 {
position:absolute;
z-index:99999;
background-color:white;
}
在 up2 中
.up2 {
padding-top:87px;
}
它的作用是把盒子 1 放在盒子 2 上，隐藏它的 facebook 和 bla bla 让你感觉就像你有一个盒子，里面有图片和你想要的长度的流媒体
于 2013-10-19T18:33:21.697 回答
-1
<div class="fb-like-box" data-href="http://www.facebook.com/example" data-width="292" data-height="250" data-show-faces="true" data-stream="false" data-header="false"></div>
将此代码中的调整为height最适合您的。
于 2012-09-02T08:01:48.347 回答