IE7 - setAutoGrow не работает

Я создал приложение facebook, которое я использую внутри вкладки iFrame.

Я использую функцию setAutoGrow для Javascript SDK, чтобы iFrame расширялся до конца содержимого.

Из моих наблюдений функция setAutoGrow не работает в IE7, и я не могу понять, почему. Все остальные браузеры (включая IE8 и 9) работают правильно.

Для целей тестирования я создал градиент высотой 1500 пикселей.

Example gradient for testing purposed of 1500px height

В качестве примера я опубликую, как он выглядит в Chrome. Как вы можете видеть, градиент можно прокручивать до конца (красный цвет):

Gradient inside iFrame tab works as expected in normal browsers

И вот что происходит в IE7. Высота iFrame составляет 800 пикселей (как определено в настройках приложения). Вы можете видеть, что он останавливается на "бирюзовый", а функция setAutoGrow не расширяет его до желаемой высоты (1500 пикселей).

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;
        }

И это фрагмент javascript, который я разместил непосредственно перед закрывающим тегом body и после тега fb-root:

window.fbAsyncInit = function() {

    FB.init({

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

    });

    FB.Canvas.setAutoGrow();

};

Я нашел отчет об ошибке, который относится к 1 августа, который был закрыт FB: https://developers.facebook.com/bugs/209607222498543?browse=search_5009002cb69058a73627413

Я прочитал и применил подсказки из следующего раздела: Facebook iframe FB.Canvas.setAutoGrow не растет автоматически после начальной загрузки?

... но ничто, кажется, не решает проблему.

Есть ли у кого-то очевидный намек, что-то, над чем я наблюдал, или простое решение/обходное решение для этой проблемы?

Пока я использовал IE7 DebugBar, я заметил, что у него возникла проблема с загрузкой URL-адреса с именем "dimension_context.php". Я приложу скриншот.

IE7 DebugBar loading problem

Ответы

Ответ 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>

Ответ 2

Вы можете увидеть здесь, что моя вкладка работает над 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 (щелкните по изображению)

Ответ 3

Вы пытались перехватить кеш all.js, добавив к нему случайный параметр GET? Кроме того, я бы переписал http://part to//, чтобы файл javascript правильно загружался в случае, если facebook находится в режиме https.

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