0

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

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

我在应用程序的高级设置中设置“画布高度：固定为 800 像素”，并使用推荐的 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 中运行？

4

2 回答 2

1

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

于 2014-02-13T14:24:41.420 回答
0

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

于 2012-05-28T08:24:24.773 回答