Позиция: фиксированная в холсте facebook (iframe)

Мы хотели бы иметь элемент DOM для якоря с положением: зафиксировано в нашем приложении холста facebook с размером холста. Поскольку приложение работает в canvas iframe, простое использование позиции css: исправлено не работает: содержимое iframe не видит никаких событий прокрутки со страницы внешнего Facebook.Позиция: фиксированная в холсте facebook (iframe)

Первый подход, чтобы решить это, - это ping 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)

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

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

источник

2012-03-09 Nils Blum-Oeste

В качестве обходного пути мы переключились на фиксированное приложение холста высоты. Таким образом, у iframe есть собственные полосы прокрутки и позиция: фиксированные работы. Но этот подход имеет некоторые другие незначительные недостатки. Поэтому меня все еще интересует, если что-то может быть сделано для решения проблемы с помощью приложения для расчета высоты жидкости. –

Я попытался использовать тот же метод для установки фиксированных элементов в моем iFrame Facebook, и мне кажется, что у меня возникла новая проблема -> В моей консоли разработчика показано, что «Uncaught SecurityError: заблокировано фрейм с источником« mydomain.com »от доступа к кадр с источником «facebook.com». Доступ к кадру задают «document.domain» на «facebook.com», но обратный доступ к кадру не имеет. Оба должны установить «document.domain» на одно и то же значение, чтобы разрешить доступ. " С этим вы столкнулись? –

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

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

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

источник

2012-06-15 15:52:37

приложение не работает: «Использование приложения« Bauhaus App »было ограничено Ошибка при загрузке страницы из приложения Bauhaus« –

Я боялся, что что-то подобное произойдет. Я попытаюсь исправить это в понедельник, когда вернусь в офис. Между тем, если у вас есть собственное тестовое приложение, вы можете попробовать его с кодом, который я вам предоставил, если хотите. Ура! –

@nblumoe, я еще не мог исправить разрешения для своего приложения для тестирования Facebook, и мне нужно использовать его для другого тестирования. Получил ли ответ, который я предоставил, какую-либо помощь? Вы пытались использовать код? –

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

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

источник

2012-09-06 22:38:33

Позиция: фиксированная в холсте facebook (iframe)

ответ

Смежные вопросы