FB.Canvas.setSize() 在 Safari 和 Chrome 中看起来不起作用。如何让它发挥作用？答案

【问题标题】：FB.Canvas.setSize() looks not working in Safari and Chrome. How make it work?FB.Canvas.setSize() 在 Safari 和 Chrome 中看起来不起作用。如何让它发挥作用？
【发布时间】：2012-06-02 15:05:12
【问题描述】：

我正在创建要加载到 iframe 中的 Facebook 画布应用程序。

内容的高度可能会因此处加载的动态数据而有所不同，并且无法预先设置。画布应自动调整大小以适应内容。我需要摆脱所有现代浏览器中 iframe 中的垂直滚动条。

我在应用程序的高级设置中设置了“画布高度：固定为 800px”，并使用推荐的 FB.Canvas.setSize() 解决方案：

<body>
    <div id="fb-root"></div>
    <script type="text/javascript">
        window.fbAsyncInit = function () {
            FB.init({
                appId: 'NNNN', // My App ID is placed here
                status: true,
                cookie: true,
                xfbml: true
            });
            FB.Canvas.setSize();
            FB.Canvas.setAutoGrow(7);
        };

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

        // 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 = d.location.protocol + "//connect.facebook.net/en_US/all.js";
            ref.parentNode.insertBefore(js, ref);
        } (document));
        ...
    </script>
    ...
</body>

它在 Firefox、MSIE 9 和 Opera 中运行良好。但它不适用于 Windows 上的 WebKit 浏览器：Safari 和 Chrome。

Safari 为画布 iframe 显示以下代码：

<iframe class="canvas_iframe_util noresize" frameborder="0" scrolling="no" id="iframe_canvas" name="iframe_canvas" src='javascript:""' height="800" style="height: 800px; overflow-y: hidden; "></iframe>

我做错了什么？是否可以同时在 Firefox、MSIE、Opera、Safari 和 Chrome 中运行？

【问题讨论】：

标签： safari scrollbar facebook-javascript-sdk facebook-iframe facebook-canvas

【解决方案1】：

我刚刚遇到了看似相同的问题，我认为这是一个与webkit相关的问题。经过大量调试后，我得出的结论是，如果您的页面的<html> 标签设置为height:100%;，FB 无法检测到高度。我希望这可以帮助一些可怜的灵魂。

【讨论】：

【解决方案2】：

我只使用“FB.Canvas.setAutoGrow();”（在你拥有它的同一个地方，但没有参数）来自动调整我的 iframe 大小并且它工作正常。滚动条也被删除。会不会是其他地方有问题？

【讨论】：

谢谢！我也试过这个变种。但它也适用于 Firefox，但不适用于 Safari 和 Chrome。
它适用于我在 Mac 上的 Safari (5.1.1) 中，这让我想知道问题是否出在您的其他地方 - 也许是时间问题？ FB setAutoGrow() 调用是否在您完成动态引入页面内容之前进行？只是一个想法，对不起，我无法提供更多帮助。
我现在在 Windows 上使用 Safari 5.1.5。
仅供参考，它也适用于我 Mac 上的 Chrome (19)。我怀疑操作系统对您的问题负有责任，而不是与 autoSize 调用的时间有关（尽管只是一个理论）。祝你好运。