3 способа убрать полосы прокрутки в iframe-вкладке.


Удаление полос прокрутки

Полосы прокрутки — это проблема, которая прибавила седых волос многим создателям вкладок Приветствия для фан-страниц. Я тоже с ней столкнулся в начале создания iframe-вкладок и ко мне обращались по этому вопросу много разработчиков. Могу сказать, что проблема полос прокрутки есть и на многих Страницах известных компаний. Я даже готовлю специальное видео на эту тему, которое опубликую в конце этого года.

Эта статья нужна только тем, кто пишет код для вкладок самостоятельно. Если вы используете какие-либо готовое решение, которое позволяют создавать и оформлять вкладки, в нём эта проблема уже должна быть решена.

Способов убрать полосы прокрутки есть довольно много. Я покажу 3 из них, которые я применял и которые проверены.

Причины появления полос прокрутки.

  1. Контент на вкладке по ширине превышает 520 пикселей.
  2. Если контент не превышает 520 пикселей, то остались отступы и за счёт них общая ширина получается больше 520 пикселей.
  3. Высота контента превышает 800 пикселей. По умолчанию iframe рассчитан на высоту 800 пикселей без полос прокрутки. Если высота больше, то ваш контент будет либо обрезаться, либо появится ужасная вертикальная и горизонтальная полоса прокрутки (зависит от вёрстки).

Как эти полосы прокрутки убрать? Ответ на этот вопрос есть в документации для разработчиков Facebook. В библиотеке кодов JavaScript SDK есть специальный скрипт, который предназначен именно для решения этой задачи. Я покажу полностью примеры кодов и куда их нужно вставлять.

Способ №1.

Примечание: когда вы используете код JavaScript SDK, нужно всегда инициализировать саму библиотеку JavaScript SDK, чтобы эти коды работали. Во всех пример ниже эта инициализация уже прописана и вы можете просто скопировать скрипт и вставить в свой код. Единственное значение, которое нужно заменить — это ID приложения.

Этот способ самый простой. Его преимущества: только одна дополнительная строчка кода, задаются фиксированные значения ширины и высоты, поэтому у вас всё под контролем. Его недостаток: если ваша вкладка меняет высоту постоянно (например, внизу есть плагин комментариев: чем больше комментариев, тем больше высота вкладки), то этот способ не подойдёт. Скрипт вставляется после тега <body>. Пример кода:


<div id="fb-root"></div>
<script src="https://connect.facebook.net/ru_RU/all.js"></script>
<script>
  window.fbAsyncInit = function() {
    FB.init({
             appId: '218119541542529', 
             status: true, 
             cookie: true, 
             xfbml: true,
             oauth: true
           });
    FB.Canvas.setSize({ width: 520, height: 1800 }); //Здесь меняете высоту
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/ru_RU/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Значение appId: — вставляете ID вашего приложения. Значение height: — пишите нужную высоту.

Способ №2.

Этим способом я пользовался чаще всего. Его преимущество: скрипт убирает полосы прокрутки, даже если высота вкладки меняется динамически. То есть вы один раз всё настроили и можете быть спокойны, что полос прокрутки не будет при увеличении высоты контента на вкладке. Этот скрипт состоит из двух частей. Первая часть вставляется перед закрывающим тегом </head>. Пример кода первой части.


<script type="text/javascript">
    window.fbAsyncInit = function() {
        FB.Canvas.setSize();
    }
// Do things that will sometimes call sizeChangeCallback()
    function sizeChangeCallback() {
        FB.Canvas.setSize();
    }
</script>

А вторая часть вставляется перед закрывающим тегом </body>. Пример кода второй части.


<div id="fb-root"></div>
<script src="https://connect.facebook.net/ru_RU/all.js"></script>
<script>
     FB.init({
              appId : '176549043671296',
              status : true, 
              cookie : true, 
              xfbml : true, 
              oauth: true
            });

     window.fbAsyncInit = function() {
           FB.Canvas.setAutoGrow();
     }
</script>

Вам нужно только заменить ID приложение во второй части кода и всё. Можете смело копировать обе части и вставлять их себе в html или php файл.

Способ №3.

Этот способ используется на iframe-вкладках на официальных Страницах Facebook. Я последнее время применяю только его. Он простой, универсальный и убирает полосы прокрутки при любой высоте. Этот скрипт вставляется сразу после тега <body>. Пример кода.


<div id="fb-root">
   <script src="https://connect.facebook.net/ru_RU/all.js#xfbml=1"></script>
</div>
<script>
    window.fbAsyncInit = function() {
        FB.init({
                 appId: '200524779360679', 
                 status: true, 
                 cookie: true, 
                 xfbml: true, 
                 oauth: true
               });
	FB.Canvas.setAutoGrow(10); //Рекомендуемое значение от 10 до 100
    };
    (function() {
        var e = document.createElement('script'); e.async = true;
	e.src = document.location.protocol + 
          '//connect.facebook.net/ru_RU/all.js';
	document.getElementById('fb-root').appendChild(e);
		}());
</script>

В этом коде надо заменить только ID приложения и всё. Значение FB.Canvas.setAutoGrow(10) это интервал обновления данных о высоте и ширине iframe-вкладки, чтобы не появлялись полосы прокрутки. В этом примере его значение 10 мс. Рекомендуется указывать от 10 до 100 мс.

Дополнение (15 марта 2012).
В новых Страницах типа «Хроника» при использовании Способа №3 наблюдалось обрезание iframe до 800 пикселей в браузерах Opera 11.61 и Firefox 10. Чтобы показывалась вся высота iframe, необходимо перенести FB.Canvas.setAutoGrow(10) из верхней части тела html в нижнюю. Для этого вы вверху данную строчку кода удаляете, а внизу перед закрывающим тегом </body> вставляете этот код:


<div id="fb-root">
   <script src="https://connect.facebook.net/ru_RU/all.js#xfbml=1"></script>
</div>
<script>
        FB.init({
                 appId: '200524779360679', // Id замените на свой!!!
                 status: true, 
                 cookie: true, 
                 xfbml: true, 
                 oauth: true
               });
	FB.Canvas.setAutoGrow(10); //Рекомендуемое значение от 10 до 100
</script>

В этом случае всё должно отображаться как надо.

Теперь для вас проблемы полос прокрутки не будет, и вы можете полностью сосредоточиться на решении основных технических задач.

P.S. Также всегда помните о CSS. Необходимо убирать все отступы по умолчанию. Как это сделать, я рассказал в следующей статье.

Комментарии Facebook: