如何正确调整Facebook Canvas应用程序（iFrame）的大小？

我需要在更新页面内容后调整画布大小。我可以明确地通过如何正确调整Facebook Canvas应用程序（iFrame）的大小？

FB.Canvas.setSize({ width: 760, height: 1480 });

但是，它不工作，没有参数，即.setSize()。

另外，我可以通过

FB.Canvas.setAutoResize(true);

但调整高度仅增加 - 它不会降低高度时，含量降低。

以下行不起作用：

FB.Arbiter.inform("setSize", FB.Canvas._computeContentSize()); 
FB.Canvas.setSize(FB.Canvas._computeContentSize());

一个怎样才能使它的工作？

一些关于这个问题更多的评论：

相关：

你如何控制你的Facebook应用程序画布的大小？

来源

2011-01-14 Andrei

我已成功地使.setSize()通过延迟它的执行（对各种论坛的建议）工作：

window.setTimeout(function() { 
    FB.Canvas.setSize(); 
}, 250);

如果你有XFBLM元素，尤其是fb:comments，那么你就需要设置其大小之前解析页面

window.setTimeout(function() { 
    FB.XFBML.parse(); 
    FB.Canvas.setSize(); 
}, 250);

注意，你需要你的内容块后运行该脚本，否则增加的时间间隔（毫秒），允许Web服务器和客户端浏览器构建调整画布前的内容。

这种方法只会增加页面的高度，并不会降低页面的高度。您可以通过实现烧制以下行的代码之前上述

FB.Canvas.setSize({height: 480}); // min height - .setSize() won't reduce it

但是手动减少，有一个缺点 - 网页会由于双调整大小闪烁。

此外，还有一个建议在若干时间间隔运行.setSize占推迟的内容：

FB.Array.forEach([300, 600, 1000, 2000], function(delay) { 
    setTimeout(function() { 
    FB.XFBML.parse(); 
    FB.Canvas.setSize(); 
    }, delay) 
});

在这种情况下，页面和XFBML元素变得相当的Blinky。

来源

2011-01-15 07:32:58 Andrei

如果你是做得对，你不应该需要任何这一点。 – Bob 2011-05-05 16:11:44

不要编写自己的定时自动调整大小的函数。FB有一个：

FB.Canvas.setAutoResize();

如果你知道当你需要调整它使用

FB.Canvas.setSize()

所以，如果你想在更小的，当你点击一个链接，把它贴在一个函数，然后调用该函数后想：

function sizeChangeCallback() { 
    FB.Canvas.setSize(); 
    } 

//start some function or on click event - here i used jquery 
$("#something").click(function() { 
    sizeChangeCallback() 
});

你并不需要设置一个明确的高度，但有时你可以有动态XFBML元素，如评论插件的麻烦。尝试使用一个事件订阅回调：

FB.Event.subscribe('xfbml.render', function(response) { 
    FB.Canvas.setAutoResize(); 
    });

http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setSize/

http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoResize/

http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/

来源

2011-03-31 16:38:00 Bob

重复相同的信息不会使任何人受益，是吗？感谢`FB.Event.subscribe（'xfbml.render'，...`虽然。最后的链接也值得一提，如果有人使用没有阅读引用的功能... – Andrei 2011-05-03 18:41:47

重复哪些信息？设置超时函数是一种破解，它不考虑页面渲染时间，并且setAutoResize已经是一个超时函数。 – Bob 2011-05-05 16:04:21

Bobby的答案是非常好的。只有我会添加到它的事情是，有些人已经成功获得该页面通过做收缩以下几点：

FB.Canvas.setSize({ width: 760, height: 10 });

然后与跟随它：

FB.Canvas.setAutoResize();

你不不必使用10，只是比页面的最小尺寸小。然后FB.Canvas.setAutoResize()应该继续，并再次使其适当的高度，并继续更新。只有当内容再次缩小时，您才需要再次调用FB.Canvas.setSize({ width: 760, height: 10 });。

这样做的危险是如果FB.Canvas.setAutoResize();不起作用，您可能会截断内容。

来源

2011-05-02 17:51:43 LocalPCGuy

这一切都为我工作。确保在结束标记之前输入它。

<div id="fb-root"></div> 
<script type="text/javascript"> 
window.fbAsyncInit = function() { 

//Der folgende Code ändert die Grösse des iFrames alle 100ms 
FB.Canvas.setAutoResize(100); 

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

</script>

来源

2011-08-31 07:59:20 Hendrik

我试图使用FB.Canvas.setSize(e);来调整我的应用程序的大小，但它根本没有调整大小。

我看了一下在Facebook的Javascript中发现，那FB.Canvas.setSize叫FB.Arbiter.inform('setSize',e)函数。

如果我从我的代码调用FB.Arbiter.inform('setSize',{ width: 760, height: 1480 })函数，画布会正确调整大小。

来源

2011-09-15 18:50:24 Akkumulator

这工作对我来说：

<script type='text/javascript'> 
window.onload=function() { 
    FB.Canvas.setSize({width:760,height:document.body.offsetHeight}); 
} 
</script>

需要注意的是，除非你正在使用其他别的原因你不需要FB.init。

来源

2011-09-15 19:45:51

我们在我们的iframe中添加了页面，将内容附加到页面上，然后允许用户刷新页面内的内容。在这些情况下，我们看到了同样的情况，在适当的情况下内容不会缩小。

FB.Canvas。的setSize（）调用_computeContentSize，其如下所示：

_computeContentSize: function() { 
    var body = document.body, 
     docElement = document.documentElement, 
     right = 0, 
     bottom = Math.max(
     Math.max(body.offsetHeight, body.scrollHeight) + 
      body.offsetTop, 
     Math.max(docElement.offsetHeight, docElement.scrollHeight) + 
      docElement.offsetTop); 

    if (body.offsetWidth < body.scrollWidth) { 
    right = body.scrollWidth + body.offsetLeft; 
    } else { 
    FB.Array.forEach(body.childNodes, function(child) { 
     var childRight = child.offsetWidth + child.offsetLeft; 
     if (childRight > right) { 
     right = childRight; 
     } 
    }); 
    } 
    if (docElement.clientLeft > 0) { 
    right += (docElement.clientLeft * 2); 
    } 
    if (docElement.clientTop > 0) { 
    bottom += (docElement.clientTop * 2); 
    } 

    return {height: bottom, width: right}; 
},

问题的行是在这里：

bottom = Math.max(
     Math.max(body.offsetHeight, body.scrollHeight) + 
     body.offsetTop, 
     Math.max(docElement.offsetHeight, docElement.scrollHeight) + 
     docElement.offsetTop);

即使你的iframe里面的内容已今非昔比，body.offsetHeight的价值不会缩水。

为了解决这个问题，我们做了computeContentSize功能的定制版本，只有咨询的docElement的高度，就像这样：

function rfComputeContentSize() { 
    var body = document.body, 
     docElement = document.documentElement, 
     right = 0, 
     bottom = Math.max(docElement.offsetHeight, docElement.scrollHeight) + docElement.offsetTop; 

    if (body.offsetWidth < body.scrollWidth) { 
    right = body.scrollWidth + body.offsetLeft; 
    } else { 
    FB.Array.forEach(body.childNodes, function(child) { 
     var childRight = child.offsetWidth + child.offsetLeft; 
     if (childRight > right) { 
     right = childRight; 
     } 
    }); 
    } 
    if (docElement.clientLeft > 0) { 
    right += (docElement.clientLeft * 2); 
    } 
    if (docElement.clientTop > 0) { 
    bottom += (docElement.clientTop * 2); 
    } 

    return {height: bottom, width: right}; 
}

任何时候我们要调整大小和知道的内容有可能缩小，我们将使用自定义函数将内容传递给setSize（例如FB.Canvas.setSize（rfComputeContentSize（））），并且无论何时我们知道内容只会增长，我们将使用标准的FB.Canvas.setSize（）函数。

请注意，我们使用setAutoGrow（），我没有检查，但我假设它使用相同的函数来确定大小。我们禁止了对setAutoGrow（）的调用，并且必须警惕在approrpriate时间调用setSize（）。在他们的交叉https://developers.facebook.com/bugs/228704057203827

来源

2012-01-03 22:48:45

我们遇到了一个问题，即他们FB.Canvas功能没有工作，尽管一切都正确的初始化，因为他们使用的是“IFRAME”，而不是IFRAME：

记录此错误与Facebook域的JS设置，因此没有XHTML兼容性。

我们通过原型化我们自己的createElement函数并覆盖它们来解决这个问题。只要把这个权利，你有Facebook的all.js之后：

document.__createElement = document.createElement; 
document.createElement = function(tagName) { 
      return document.__createElement(tagName.toLowerCase()); 
}

来源

2012-05-24 09:28:24 jaset

当调整到最小高度不要忘记将它一点点大于它是，考虑到水平滚动条和一些额外的像素某些浏览器会添加，否则您将以垂直滚动结束。

另外我不建议使用body来计算身高。

这为我工作：

window.fbAsyncInit = function() 
{FB.Canvas.setSize({height:document.getElementById('m_table').offsetHeight+40});}

其中m_table是我的所有内容表ID（你可以使用div代替）。

来源

2012-07-03 01:23:48

位的多余功能，但这篇文章解释了为什么你不能做到这一点动态，并提供了最简单的解决 ... http://www.twistermc.com/36764/shrink-facebook-tabs/ 答案很简单：收缩它真的很小，则暂停使用自动增长后，使它成为正确的尺寸......爱丽丝梦游仙境风格。

我说最简单的，因为从一个开发和用户点这会减慢速度约1/4秒，而用户获取滚动条的极细小的快闪...

来源

2012-07-19 21:10:36

如何正确调整Facebook Canvas应用程序（iFrame）的大小？

回答

相关问题