javascript - 如何正确调整 Facebook Canvas 应用程序 (iFrame) 的大小？

Question

我需要在更新页面内容后调整 Canvas 大小。我可以明确地做到这一点

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());

如何让它发挥作用？

关于该主题的更多评论:

1. http://developers.facebook.com/blog/post/93
2. http://developers.facebook.com/docs/reference/javascript/fb.canvas.setautoresize

相关:

1. facebook-api: what's Facebook Connect cross-domain receiver URL?
2. facebook-app: how can i change the height of a resizeable iframe application?
3. Document height grows on resize when setting canvas dimensions dynamically

您如何控制 Facebook Canvas 应用的大小？

Answer 1

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

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/