7

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

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：什么是 Facebook Connect 跨域接收方 URL？
  2. facebook-app：如何更改可调整大小的 iframe 应用程序的高度？
  3. 动态设置画布尺寸时，文档高度会随着调整大小而增加

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

4

10 回答 10

7

不要为定时自动调整大小编写自己的函数。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-31T16:38:00.223 回答
3

我已经设法.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 元素变得非常闪烁。

于 2011-01-15T07:32:58.030 回答
2

我们的 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() 的调用，并且必须对在适当的时间调用 setSize() 保持警惕。

使用 Facebook 记录此错误：https ://developers.facebook.com/bugs/228704057203827

于 2012-01-03T22:48:45.823 回答
1

我们遇到了一个问题FB.Canvas，尽管一切都已正确初始化，但他们的功能无法正常工作，因为他们在跨域 JS 设置中使用“IFRAME”而不是 iframe，因此不兼容 XHTML。

我们通过原型化我们自己的 createElement 函数并覆盖他们的函数来解决这个问题。在你包含 Facebooks all.js 之后把它放好：

document.__createElement = document.createElement;
document.createElement = function(tagName) {
            return document.__createElement(tagName.toLowerCase());
}
于 2012-05-24T09:28:24.427 回答
1

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

  • 我说最简单，因为从开发人员和用户的角度来看，这会减慢大约 1/4 秒的速度，并且用户会看到滚动条的微小闪光......
于 2012-07-19T21:10:36.283 回答
0

这些都不适合我。确保在结束标记之前键入此内容。

<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-31T07:59:20.107 回答
0

这对我有用：

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

请注意，您不需要 FB.init，除非您出于其他原因使用它。

于 2011-09-15T19:45:51.843 回答
0

当调整到最小高度时，不要忘记让它比原来大一点，以考虑水平滚动条和一些浏览器添加的一些额外像素，否则最终会出现垂直滚动。

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

这对我有用：

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

其中 m_table 是包含我所有内容的表 ID（您可以div改用）。

于 2012-07-03T01:23:48.333 回答
0

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-02T17:51:43.253 回答
0

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

我查看了 Facebook Javascript，发现它FB.Canvas.setSize调用了该FB.Arbiter.inform('setSize',e)函数。

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

于 2011-09-15T18:50:24.783 回答