11

我创建了一个在标签的 iFrame 中使用的 facebook 应用程序。

我正在使用 Javascript SDK 的 setAutoGrow 函数使 iFrame 展开直到内容结束。

根据我的观察，setAutoGrow 函数在 IE7 中不起作用，我不知道为什么。所有其他浏览器（包括 IE8 和 9）都可以正常工作。

出于测试目的，我创建了一个 1500 像素高的渐变。

用于测试 1500 像素高度的示例渐变

例如，我将发布它在 Chrome 中的样子。如您所见，渐变可以滚动到最后（红色）：

iFrame 选项卡内的渐变在普通浏览器中按预期工作

现在是 IE7 中发生的事情。iFrame 的默认高度为 800 像素（在应用程序设置中定义）。您可以看到它在“turquoise”处停止，并且 setAutoGrow 函数没有将其扩展到所需的高度（1500px）。

iFrame 选项卡内的渐变不会在 IE7 中展开

我的 CSS 的重要部分如下所示：

body, html { 
    overflow: hidden;        
    margin: 0; padding: 0;
}

    #wrapper {
        margin: 0 auto;
        width: 810px;    
    }

        #content {
          background: url(../img/bg.jpg) top left no-repeat;
          height: 1500px;
        }

这是我在结束 body-tag 之前和 fb-root 标记之后放置的 javascript 片段：

window.fbAsyncInit = function() {

    FB.init({

        appId      : '...',
        channelUrl : '...',
        status     : true,
        cookie     : true,
        xfbml      : true

    });

    FB.Canvas.setAutoGrow();

};

我发现了一个可以追溯到 8 月 1 日的错误报告，该报告已被 FB 关闭： https ://developers.facebook.com/bugs/209607222498543?browse=search_5009002cb69058a73627413

我已阅读并应用了以下主题的提示： Facebook iframe FB.Canvas.setAutoGrow does not auto grow after initial load?

...但似乎没有什么可以解决问题。

有没有人有明显的提示，我监督过的事情，或者这个问题的简单解决方案/解决方法？

当我使用 IE7 DebugBar 时，我注意到它在加载名为“dimension_context.php”的 URL 时出现问题。我会附上截图。

IE7 DebugBar 加载问题

4

3 回答 3

1

你可以在这里看到我的标签在 IE7 上工作：

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" 
type="text/javascript"></script>
</head>
<body style="overflow:hidden">
<div id="fb-root"></div>
<!-- YOUR HTML -->
<script type="text/javascript">
window.fbAsyncInit = function () {
        FB.init({
            appId: 0000000000000, // App ID

            status: true, // check login status
            cookie: true, // enable cookies to allow the server to access the session
            oauth: true, // enable OAuth 2.0
            xfbml: true  // parse XFBML
        });

        FB.Canvas.setAutoGrow();
        FB.Canvas.setSize({ width: 810, height: 1417 });

    };



    // Load the SDK Asynchronously
    (function (d) {
        var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    } (document));
</script>
</body>
</html>

我的应用设置：

页面标签宽度：810px
画布宽度：固定
画布高度：固定为 1147px

如果您希望标签适应不同的高度，请在每个页面中尝试以下操作：

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" 
type="text/javascript"></script>
</head>
<body style="overflow:hidden">
<div id="fb-root"></div>
<!-- YOUR HTML -->
<script type="text/javascript">
$(document).ready(function(){
    window.fbAsyncInit = function () {
        FB.init({
            appId: 0000000000000, // App ID

            status: true, // check login status
            cookie: true, // enable cookies to allow the server to access the session
            oauth: true, // enable OAuth 2.0
            xfbml: true  // parse XFBML
        });

        FB.Canvas.setAutoGrow();
        FB.Canvas.setSize({ width: 810, height: $(document).height()});

    };



    // Load the SDK Asynchronously
    (function (d) {
        var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    } (document));

});
</script>
</body>
</html>

看一个例子：

https://www.facebook.com/pages/Vpascoal/215529398504982?sk=app_105369212942645 （点击图片）

于 2012-08-17T15:52:54.073 回答
1

您是否尝试通过向其添加随机 GET 参数来破坏 all.js 的缓存？此外，我会将 http:// 部分重写为 // 以便在 facebook 处于 https 模式的情况下正确加载 javascript 文件。

<script type="text/javascript" language="javascript" src="//connect.facebook.net/en_US/all.js?v1"></script>
于 2012-08-21T13:04:51.767 回答
1

我正在使用这个可能对你有帮助

<html>
<body>
    <div id="fb-root">
    </div>
    <script type="text/javascript" language="javascript" src="http://connect.facebook.net/en_US/all.js"></script>
    <script type="text/javascript" language="javascript">
        FB.init({
            appId: 'APPID',
            status: true, // check login status
            cookie: true, // enable cookies to allow the server to access the session
            xfbml: true// parse XFBML
        });
        window.fbAsyncInit = function () {
            FB.Canvas.setSize();
        }
        //  FB.Canvas.setAutoResize();
        FB.Canvas.setAutoGrow(7);
    </script>
<form></form>

</body>
</html>
于 2012-08-17T12:24:10.140 回答