Положение: исправлено в холсте facebook (iframe) - PullRequest
Новая
       32

Положение: исправлено в холсте facebook (iframe)

4 голосов
/ 09 марта 2012

Нам хотелось бы иметь DOM-элемент привязки с позицией: исправлено в нашем приложении для холста на Facebook с изменяемым размером холста. Поскольку приложение работает в холсте iframe, простое использование css position: fixed не работает: содержимое iframe не видит никаких событий прокрутки с окружающей страницы facebook.

Первым подходом к решению этой проблемы было пинг Facebook API и получить позицию прокрутки. Поэтому мы помещаем это в $ (document) .ready (): 

# refresh position of feedback button to simulate position:fixed in iframe
refresh_timer = 1000
move_button = () ->
  # get scroll position from facebook
  FB.Canvas.getPageInfo (info)->
    # animate button to new position with an offset of 250px
    $('#fdbk_tab').animate({top: info.scrollTop+250}, 100)
# start interval to do the refresh
setInterval(move_button, refresh_timer)

В общем, это работает. Однако это приводит к ухудшению работы пользователя, так как кнопка перезагрузки браузера и курсор мыши мигают, когда вызывается API api facebook.

Любые предложения о том, как улучшить этот или другие способы реализации / имитации позиции: исправлены в iframe, высоко ценятся!

Ответы [ 2 ]

2 голосов
/ 15 июня 2012

Я подозреваю, что это как-то связано с настройкой HTML-макета приложения.Я сделал быстрый тест в моем тестовом приложении, и это сработало.Тело документа содержит только div с абсолютным позиционированием, который содержит якорный div с position: fixed и несколько слов, чтобы вы могли видеть прокрутку.Код выглядит следующим образом: 

<body>
<div style="width: 300px; height: 2000px; position: absolute; top: 0; background-color: yellow;">
    <a href="www.google.com">
        <div style="width: 60px; height: 20px; background-color: #000; position: fixed; top: 20px;">
            ANCHOR
        </div>
        1words<br/>
        1words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        2words<br/><br/><br/><br/>
        2words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        3words<br/><br/><br/><br/>
        3words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        4words<br/><br/><br/><br/>
        4words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/><br/><br/><br/>
    </a>
</div>

Вы можете увидеть пример на работе здесь (Я просто снял ограничения по стране, если по какой-либо причине вы не можете получить доступприложение скажи мне и я еще раз проверю настройки).

1 голос
/ 07 сентября 2012

Просто суммируем комментарии к первому ответу: метод, предложенный Rorok_89, на самом деле не работает для точного варианта использования, описанного в вопросе.Это работает, только если у вас включено переполнение в iframe.

Я не знаю ни одного способа решить вопрос, заданный OP.

...