Question

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

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

根据我的观察，setAutoGrow函数在IE7中不起作用，我无法弄清楚原因。所有其他浏览器（包括IE8和9）都正常工作。

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

Example gradient for testing purposed of 1500px height

举个例子，我会在Chrome中发布它的样子。如您所见，渐变可以滚动到结尾（红色）：

Gradient inside iFrame tab works as expected in normal browsers

现在IE7中发生了什么。 iFrame的默认高度为800px（在应用程序设置中定义）。您可以看到它在“绿松石”处停止，并且setAutoGrow函数不会将其扩展到所需的高度（1500px）。

Gradient inside iFrame tab doesnt expand in 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 loading problem

Answer 1

您可以看到我的标签在IE7上运行的here：

<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
画布宽度：固定
画布高度：固定为1147像素

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

<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 （点击图片）

Answer 2

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

<script type="text/javascript" language="javascript" src="//connect.facebook.net/en_US/all.js?v1"></script>

IE7 - setAutoGrow不起作用

2 个答案: