FB.Canvas.setSize () не работает в Safari и Chrome. Как заставить это работать?

Я создаю приложение холста Facebook для загрузки в iframe.

Высота содержимого может отличаться из-за загруженных в него динамических данных и не может быть установлена ​​заранее. Размер холста должен автоматически изменяться, чтобы соответствовать содержимому. Мне нужно избавиться от вертикальной полосы прокрутки в 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. Но это не работает в браузерах WebKit в Windows: 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 одновременно?


scrollbar safari facebook-javascript-sdk facebook-iframe facebook-canvas
person Marina Bolbas    schedule 28.05.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я только что столкнулся с, казалось бы, такой же проблемой, я думаю, что это проблема, связанная с webkit. После долгой отладки я пришел к выводу, что FB не может определить высоту, если для тега <html> вашей страницы установлено значение height:100%;. Я надеюсь, что это поможет некоторым бедным душам.

person Ambidex    schedule 13.02.2014

arrow_upward
0
arrow_downward

Я использую только «FB.Canvas.setAutoGrow ();» (там же, где он у вас, но без параметра) для автоматического изменения размера моих фреймов, и он отлично работает. Полосы прокрутки тоже убраны. Может быть проблема где-то еще?

person Snouto    schedule 28.05.2012
comment
Спасибо! Я тоже пробовал этот вариант. Но он также работает в Firefox, но не в Safari и Chrome. - person Marina Bolbas; 28.05.2012
comment
У меня это работает в Safari (5.1.1) на Mac, что заставляет меня задаться вопросом, не в чем-то другом для вас проблема - может быть, проблема с синхронизацией? Выполняется ли вызов setAutoGrow () FB до завершения динамического ввода содержимого страницы? Просто мысль, извини, я ничем не могу больше помочь. - person Snouto; 28.05.2012
comment
Сейчас я использую Safari 5.1.5 в Windows. - person Marina Bolbas; 28.05.2012
comment
К вашему сведению, он также работает в Chrome (19) на моем Mac. Я сомневаюсь, что ОС ответственна за вашу проблему больше, чем за время вызова autoSize (хотя это всего лишь теория). Удачи. - person Snouto; 28.05.2012