Изменение размера iframe приложения, чтобы избавиться от всех полос прокрутки в Firefox

Question

Я сделал приложение, которое будет вкладкой страницы FB. Теперь я пытаюсь избавиться от полос прокрутки, которые появляются, когда содержимое превышает 800 пикселей в высоту. Для этого я использовал следующий код:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
    FB.init({
        appId : '<?php echo $app_id; ?>',
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml : true // parse XFBML
    });
</script>
<script type="text/javascript">
    window.fbAsyncInit = function() {
        FB.Canvas.setAutoGrow();
    }
    // Do things that will sometimes call sizeChangeCallback()
    function sizeChangeCallback() {
        FB.Canvas.setSize(); 
    }
</script>

Теперь это нормально работает для Google Chrome, но показывает полосы прокрутки для Firefox. На самом деле изначально не было горизонтальной полосы прокрутки, которая сейчас появилась. В каком-то блоге было написано, что, чтобы избавиться от этой ошибки, мы должны установить переполнение на скрытый. Я тоже пытался это делать, но это сокращало содержание. Какое решение для этого? Это мой CSS для HTML и тела:

html {
    border: 1px solid #cccccc;
    min-height: 798px;
    font-size: 12px;
    overflow: hidden;
}
body {
    width: 495px;
    overflow: hidden;
font-size: 12px;
background-color: #f7f7f7;
color: #444444;
font-family: lucida grande, tahoma, verdana, arial, sans-serif;
}

Answer 1

У меня возникла та же проблема с Firefox при добавлении полос прокрутки на мою страницу / вкладку в Facebook. Исправление в конце было ...

1. В настройках приложения убедитесь, что у вас настроены «вкладка страницы» и «приложение на facebook» с помощью вкладки страницы / URL-адреса холста и защищенной версии.

2. Код:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'FB_APP_ID', // App ID
      channelUrl : 'FB_CHANNEL_URL', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
    FB.Canvas.setAutoGrow();
  };

  // 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>

Удачи!

Answer 2

Я тоже сталкивался с этой проблемой, и после нескольких часов чтения постов в Интернете я наконец нашел решение, которое работает.Если вы включили этот div в свою разметку:

<div id="fb-root"></div>

Просто добавьте этот скрипт в конец вашего файла (перед закрытием тега body):

window.fbAsyncInit = function () {
    FB.init({
        appId:'APP ID',
        status:true,
        cookie:true,
        xfbml:true
    });
FB.Canvas.setAutoGrow();
};

(function (d, debug) {
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 = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
    ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));

Моя проблема заключалась в том, чтоНесмотря на то, что он работал над Chrome, Safari и даже IE, он все еще не работал в Firefox и Opera.Проблема заключалась в том, что приведенный выше код был написан внутри функции $ (document) .ready () , поэтому Firefox и Opera никогда не запускали функцию fbAsyncInit .После перемещения кода за пределы, независимо от других функций, все работает отлично.

Answer 3

Сделать одну функцию следующим образом:

function grow()
  {

    FB.Canvas.setAutoGrow();

     }

Вызовите эту функцию при событии загрузки кузова как <body onLoad="grow()">

Надеюсь, что это работает, ура.

Answer 4

Для меня это часто помогало установить только overflow-x на скрытый. Это не должно обрезать контент, помогая против некоторых причуд в вычислениях размера Firefox.

EDIT: Проблема с порядком исполнения. Facebook-SDK выполняется первым. Он проверяет существование window.fbAsyncInit - которое не определено в этой точке. Позже определяется fbAsyncInit, но Facebook никогда больше не проверяет, поэтому функция не выполняется никогда. Поэтому setAutoGrow не выполняется, и вся магия не происходит. Перемещение определения fbAsyncInit в некоторый момент до включения FB SDK должно решить проблему.