Приложение Facebook на основе iframe получает ненужные полосы прокрутки с меньшим размером окна - PullRequest
Новая
       13

Приложение Facebook на основе iframe получает ненужные полосы прокрутки с меньшим размером окна

2 голосов
/ 11 ноября 2010

У меня есть страница профиля приложения Facebook:

http://www.facebook.com/developers/editapp.php?app_id=122313254494566#!/apps/application.php?id=122313254494566

, которое связано с моим приложением для фреймов Facebook, Gem Spinner:

http://apps.facebook.com/gemspinner/

То, что я вижу, это то, что, в зависимости от высоты окна, мое iframed-содержимое будет отображаться с фиксированной высотой и полосой прокрутки, а не просто стекает по странице (и по необходимости внизу страницы) , как я хотел бы. Когда я делаю окно короче, появляется полоса прокрутки; когда я делаю окно выше, полоса прокрутки исчезает. Насколько я понимаю, это Facebook определяет эту высоту и добавляет полосу прокрутки (но, возможно, я ошибаюсь в этом). В любом случае, я был бы признателен за любую помощь в понимании этого и позволении моему контенту перемещаться по странице по мере необходимости.

1 Ответ

1 голос
/ 11 ноября 2010

Что ж, я сделал несколько вещей, чтобы заставить его работать.

(1) В настройках приложения на вкладке "Интеграция с Facebook" в разделе "Размер IFrame" я выбрал "Автоматическое изменение размера" вместо "Показать полосы прокрутки".

(2) Я загрузил API подключения Facebook (см. Код ниже).

(3) Я вызвал FB.Canvas.setAutoResize (100) в двух разных местах.Я называю это дважды, потому что мне не было ясно, в каком месте это произойдет быстрее.В раннем тестировании я видел, что высота iframe начиналась с короткого (возможно, 800 пикселей в высоту), а затем увеличивалась до полного размера моего контента (может быть, 1100 пикселей в высоту).В последующих тестах размер iframe немедленно изменяется, поэтому я не вижу двух состояний.Так что я не совсем понимаю, о сроках / механизме здесь. 

  <body>
    <div id="fb-root">
    </div>
    <script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
    <script type="text/javascript">
      FB.init({
        appId  : 'your app id here',
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml  : false  // parse XFBML
      });
      FB.Canvas.setAutoResize( 100 );
    </script>

    ... the rest of the page body goes here ...

    <script type="text/javascript">
      FB.Canvas.setAutoResize( 100 );
    </script>
  </body>
...