Question

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

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

我在应用程序的高级设置中设置了“Canvas Height：Fixed at 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中使用它？

Answer 1

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

Answer 2

我只使用'FB.Canvas.setAutoGrow（）;'（在同一个地方，你有它，但没有参数）自动调整我的iframe，它工作正常。滚动条也被删除。其他地方可能有问题吗？

FB.Canvas.setSize（）在Safari和Chrome中看起来不起作用。如何使它工作？

2 个答案: