我正在为具有“时间轴”布局的Facebook页面开发应用程序,我希望应用程序的高度随内容缩放,但应用程序的高度固定为800px。
当前应用程序设置显示高度设置为“流体”,但我也尝试将高度固定为随机值,并且目睹没有变化。
如何让我的应用的高度扩展到它的内容?感谢您的回复。
更新: 所以将其附加到我的身体标签上。
<body onload="FB.Canvas.setSize({width: 810, height: 910})">
<div id="fb-root"></div>
<script>
(function () {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOURAPPID;
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
</script>
但我不知道它为什么会起作用,所以我想我会把我的问题改为'上面的代码是做什么的?'所以我真的可以理解下次要采取的步骤。我现在把它作为答案来解决这个问题。
答案 0 :(得分:8)
这是设置的正确方法,我只需要盯着它看一段时间并且阅读文档的方式太多次了。将以下内容放在fb-root div下面就像一个冠军。
window.fbAsyncInit = function () {
FB.init({
appId: 'YOURAPPID', // App ID
channelUrl: '/channel.html', // Channel File
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
FB.Canvas.setAutoGrow(); //Resizes the iframe to fit content
};
// Load the SDK Asynchronously
(function (d) {
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) { return; }
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
} (document));
答案 1 :(得分:0)
嵌入javascript代码以增加iframe的高度
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize( 100 );
}
function sizeChangeCallback() {
FB.Canvas.setSize({ width: 810, height:1300 });
}
</script>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR APP ID',
status : true,
cookie : true,
xfbml : true
});
</script>
答案 2 :(得分:0)
Ashish的回应对我有用。
我还添加了一种正文样式,以防止在页面加载时滚动条出现一秒钟:
body {overflow:hidden;}