如何从Facebook的iFrame应用程序中删除滚动条
我已经创build了一个Facebook的iframe应用程序，并在Facebook应用程序设置页面的尺寸设置为自动resize，但在IE和谷歌浏览器底部仍然显示一个水平滚动条。 在Firefox中正常工作。 任何解决scheme
这里解释了如何做到这一点： http : //clockworkcoder.blogspot.com/2011/02/how-to-removing-facebook-application-i.html基本上你应该使用
window.fbAsyncInit = function() { FB.Canvas.setAutoGrow(); }; 加上确保你的HTML和身体标记设置为overflow:hidden所以你不会得到那些简短显示的滚动条是如此烦人
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow: hidden"> <head> <!-- Header stuff --> </head> <body style="overflow: hidden">
您还需要启动计时器来调用自动resize的代码。 在你的应用程序中HTML做：
window.fbAsyncInit = function() { FB.Canvas.setAutoResize(); };
以上代码将每100ms检查一次内容大小。 如果你想使用不同的时间，你可以传递毫秒作为variables：
window.fbAsyncInit = function() { FB.Canvas.setAutoResize(50); };
如果您的内容大小在页面加载后没有改变，您可以通过手动更改内容大小来节省CPU周期：
window.fbAsyncInit = function() { FB.Canvas.setSize(); }
你甚至可以传递所需的大小作为参数
window.fbAsyncInit = function() { FB.Canvas.setSize({ width: 520, height: 600 }); }
Facebook必须移除canvas应用程序的iframe的SCROLLING =“YES”属性，并将溢出：auto自动添加到样式属性，或者向我们提供一个函数，根据我们的应用程序，我们可以将滚动属性值更改为NO。
我试过你所说的一切，看着这两个链接（ CSS +火狐：隐藏滚动iframe上的滚动=是 – Facebook的帆布高度没有在IE8和Firefox的滚动集 ）讨论同样的问题，但它没有为我工作。
对我而言，改变了应用canvasconfiguration（ https://developers.facebook.com/apps ）高级部分的canvas设置为固定canvas宽度（760px）和高度（固定为800）。
我希望这可以帮助你。
可能听起来很明显，但你有没有试过CSS overflow: hidden在iFrame上overflow: hidden ？
我过去曾经遇到过这个问题。 resize可能会起作用，但在Facebookcanvas上有最大宽度。 你的body元素可能有某种默认的填充/边距，因此它的大小大于最大宽度。
尝试使用清除默认样式的重置样式表： http : //developer.yahoo.com/yui/3/cssreset/
我已经尝试了很多这里列出的东西，但真正起作用的是：
- configuration – >高级 – >canvas设置，设置一个固定的宽度和高度
同样重要的是要注意，如果你不提供隐私政策的url，Facebook不会保存这个configuration。
长久以来一直对Firefox的这个问题感到沮丧，终于find了最好的解决办法，就是从Roses Mark这里来的。 她提出了几种方法，但只有身体负载稳定地删除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>
水平滚动条总是由HTML页面的宽度大于iframe的区域引起的。
确保你设置正确的宽度为您或包含。
在CSS文件中设置宽度并设置溢出属性。
如果它是一个Tab iframe应用程序，你可以这样设置：
body{ width:510px; overflow:hidden; }
除了这个代码：
window.fbAsyncInit = function() { FB.Canvas.setAutoResize(); };
同时更新FB开发人员应用程序设置中的Canvas Height设置：
将canvas高度设置为固定而不是stream体。 这将删除水平和垂直滚动条。
那么，我将分享一些可以实施的资源，以摆脱您的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>
我find了完美的解决scheme！ 确保将以下CSS代码放入<head>区域中：
<style>*{margin:0;padding:0;}</style>
实际显示滚动条是因为有一个默认的填充或边距给定。 希望我能帮助！
- Facebook密钥哈希不匹配任何存储的密钥哈希值
- 在Android中集成FaceBook，Twitter，社交networking
- 给定URL不被应用程序configuration所允许
- 发私信给朋友
- facebook connect- $ user_id = $ facebook-> getUser（）; 总是返回0
- 打开从iOS应用程序的Facebook页面的链接
- 当使用本地主机时，Facebook应用程序域名
- 有Facebook的sharer.php更改为不再接受详细的参数？
- 原生iOS应用程序：我在“设置”，“基本”下面，在Facebook的开发人员“iPhone App Store ID”中放入了什么？
