Question

我创建了一个facebook iframe应用程序，并在Facebook应用程序设置页面中将尺寸设置为自动调整大小，但在IE和谷歌浏览器的底部仍然显示水平滚动条。在Firefox中正常工作。任何解决方案？

Answer 1

这里解释了如何做到这一点： http://clockworkcoder.blogspot.com/2011/02/how-to-removing-facebook-application-i.html 基本上你应该使用

window.fbAsyncInit = function() {
    FB.Canvas.setAutoGrow();
};

另外请确保您的html和body标记设置为overflow:hidden，这样您就不会看到那些简单显示的滚动条非常烦人

<html xmlns="http://www.w3.org/1999/xhtml" style="overflow: hidden">
    <head>
  <!-- Header stuff -->
 </head>
 <body style="overflow: hidden">

Answer 2

您还需要启动计时器以调用自动调整代码。在您的应用程序中，HTML执行：

window.fbAsyncInit = function() {
    FB.Canvas.setAutoResize();
};

以上代码将每100毫秒检查一次内容尺寸。如果要使用不同的时序，可以将毫秒作为变量传递：

window.fbAsyncInit = function() {
    FB.Canvas.setAutoResize(50);
};

如果您的内容大小在页面加载后没有改变，您可以通过手动更改内容大小来节省CPU周期：

window.fbAsyncInit = function() {
    FB.Canvas.setSize();
}

您甚至可以将所需大小作为参数传递

window.fbAsyncInit = function() {
    FB.Canvas.setSize({ width: 520, height: 600 });
}

Answer 3

Facebook必须删除canvas app的iframe的SCROLLING =“YES”属性，并将overflow：auto添加到style属性或者为我们提供了一个函数，通过它我们可以根据我们的应用程序将滚动属性值更改为NO。

Answer 4

我已经尝试了你所说的一切，并查看了这两个链接（CSS + FireFox: hiding scrollbar on iframe with scrolling=yes - facebook canvas height no scroll set in ie8 and firefox）讨论同样的问题，但它对我不起作用。

对我来说有用的是将应用程序画布配置（https://developers.facebook.com/apps）高级部分中的画布设置更改为固定画布宽度（760px）和高度（固定为800）。

我希望这对你有所帮助。

Answer 5

可能听起来很明显，但您是否在iFrame上尝试过CSS overflow: hidden？

Answer 6

过去我遇到过这个问题。虽然调整大小可能有效，但Facebook画布上有一个最大宽度。你的body元素可能有某种默认的填充/边距，因此它的框大于最大宽度。

尝试使用清除默认样式的重置样式表：http://developer.yahoo.com/yui/3/cssreset/

Answer 7

好吧，我将分享从几个资源中收集的一些技术，这些资源可以实现，以摆脱你的iframe facebook应用程序的不需要的滚动条。所以，这是第一种技术：

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<script type="text/javascript">
function framesetsize(w,h){
var obj =   new Object;
obj.width=w;
obj.height=h;
FB.Canvas.setSize(obj);
}
</script>
</head>
<body onload="framesetsize(500,3300)"> <!--specify the height and width for resize-->
<div id="fb-root"></div> <!--this div is required by the Javascript SDK-->
<div style="height: 2400px">
//Your content
//Goes here
</div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
</body>
</html>

使用最新的Javascript Facebook SDK [不使用Body OnLoad]

window.fbAsyncInit = function() {
FB.init({
appId  : '142388952486760',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml  : true // parse XFBML
});
FB.Canvas.setAutoResize(); //set size according to iframe content size
};

(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());

使用旧版Facebook Javascript SDK

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(
["CanvasUtil"],
function(){
FB.XdComm.Server.init('/xd_receiver.html');
FB.CanvasClient.startTimerToSizeToContent();
}
);
</script>

<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function(){ FB.Facebook.init("Your Facebook API Key", "/xd_receiver.html"); });
</script>

Answer 8

水平滚动条总是由HTML页面的宽度大于iframe的区域引起的。

确保为您的或包含设置正确的宽度。

在CSS文件中设置宽度并设置overflow属性。

如果是Tab iframe应用程序，您可以这样设置：

body{
  width:510px;
  overflow:hidden;
}

Answer 9

长期以来对Firefox的这个问题感到沮丧，终于找到了最好的解决方案，这是来自Roses Mark。她提出了几种方法，但是只有body onload可以在Firefox 10中稳定地删除滚动条。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
        <script type="text/javascript">
            function framesetsize(w,h){
                var obj = new Object;
                obj.width=w;
                obj.height=h;
                FB.Canvas.setSize(obj);
            }
        </script>
    </head>
    <body onload="framesetsize(500,3300)"> <!--specify the height and width for resize-->
        <div id="fb-root"></div> <!--this div is required by the Javascript SDK-->
        <div style="height: 2400px">
            //Your content
            //Goes here
        </div>
        <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
    </body>
</html>

Answer 10

除了这段代码：

window.fbAsyncInit = function() {
    FB.Canvas.setAutoResize();
};

还在FB开发者应用设置中更新Canvas Height设置：

将画布高度设置为“固定”而不是“流体”。这将删除水平和垂直滚动条。

Answer 11

我已经尝试了很多这里列出的东西，但真正有效的是：

配置 - ＆gt;高级 - ＆gt;画布设置，设置固定的宽度和高度

同样重要的是要注意，如果您不提供隐私政策网址，Facebook将不会保存此配置。

Answer 12

我可能会迟到，但我有非常简单的解决方案。这可能会有所帮助

页面插件div里面：

<div class="coverhack"></div>

和CSS：

.coverhack {
    position: absolute;
    width: 520px;
    height: 440px;
    background-color: rgba(0, 0, 0, 0);
    bottom: 0;
}

我所做的只是覆盖了可滚动部分，因此无法滚动。可能不是完美的答案，但它的工作原理与所有答案中延迟最快的相同。

Answer 13

我找到了完美的解决方案！确保将以下CSS代码放入<head>区域：

<style>*{margin:0;padding:0;}</style>

实际显示滚动条是因为给定了默认填充或边距。希望我能帮忙！

如何从Facebook iFrame应用程序中删除滚动条

13 个答案: