위치 : 페이 스북 캔버스 (iframe)에서 고정

위치가 고정 된 앵커 DOM 요소가 필요합니다. 유동 캔버스 크기의 facebook 캔버스 앱에 고정되어 있습니다. 앱이 캔버스 iframe에서 실행되기 때문에 CSS 위치의 간단한 사용 : 고정이 작동하지 않음 : iframe 콘텐츠가 주변의 Facebook 페이지에서 스크롤 이벤트를 보지 못합니다.위치 : 페이 스북 캔버스 (iframe)에서 고정

이 문제를 해결하기위한 첫 번째 방법은 facebook API를 ping하여 스크롤 위치를 얻는 것입니다. 일반적으로이 수행 작업을

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

: 그래서 우리는 $로 (문서) .ready()를이 넣어. 그러나 페이스 북 API에 대한 호출이 트리거 될 때 브라우저 재로드 버튼과 마우스 커서가 깜박이기 때문에 사용자 경험이 좋지 않습니다.

이 방법을 개선하는 방법이나 모방 위치를 구현하는 방법에 대한 제안 사항은 iframe 내에 고정되어 있습니다.

출처

2012-03-09 Nils Blum-Oeste

해결 방법으로 고정 높이 캔버스 앱으로 다시 전환했습니다. 이 방법은 iframe 자체 scrollbars 및 위치 : 고정 된 작동합니다. 그러나이 접근법에는 몇 가지 다른 사소한 단점이 있습니다. 유체 높이 앱으로 문제를 해결하기 위해 뭔가를 할 수 있다면 여전히 관심이 있습니다. –

페이스 북의 iFrame에서 고정 요소를 배치하는 데 같은 방법을 사용했지만 새로운 문제에 직면 한 것처럼 보입니다. - "내 잡기 SecurityError : 원산지가"mydomain.com "인 프레임이 차단되어 개발자 콘솔에 표시됩니다. 프레임이 원점 인 "facebook.com"을 가지고 있습니다. 액세스되는 프레임은 "document.domain"을 "facebook.com"으로 설정하지만 액세스를 요청한 프레임은 그렇지 않습니다. 둘 모두 "document.domain"을 액세스를 허용하는 동일한 값으로 설정해야합니다. " 이것도 만났습니까? –

앱 레이아웃을 설정하는 방법과 관련이 있다고 생각됩니다. 내 테스트 응용 프로그램에서 빠른 테스트를했고 효과가있었습니다. 문서의 본문에는 절대 위치 지정이있는 div가 포함되어 있으며 position : fixed 및 스크롤 할 수있는 단어가있는 앵커 div가 포함되어 있습니다. 코드는 다음과 같습니다 : 당신은 일 here의 예를 볼 수 있습니다

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

가 (난 그냥 국가 제한을 제거, 어떤 이유로 앱이 말해 액세스 할 수 없습니다와 나는를 확인할 수 있습니다 경우 설정 다시).

출처

2012-06-15 15:52:37

앱이 작동하지 않습니다 : "앱"Bauhaus App "의 사용이 제한되었습니다. 바우 하우스 앱에서 페이지를로드하는 중에 오류가 발생했습니다." –

그런 일이 발생할 것 같았습니다. 이번 월요일에 내가 사무실로 돌아갈 때 그것을 고치려고 노력할 것입니다. 한편, 자신 만의 테스트 응용 프로그램을 가지고 있다면 원하는 코드를 제공 할 수 있습니다. 건배! –

@nblumoe, 아직 페이스 북 테스트 앱에 대한 권한을 수정할 수 없어 다른 테스트에 사용해야합니다. 제가 제공 한 답변이 도움이 되었습니까? 코드를 사용해 보셨습니까? –

첫 번째 답변에 설명을 요약하면 Rorok_89에서 제안한 방법은 질문에 설명 된 정확한 사용 사례에서는 실제로 작동하지 않습니다. iframe에서 오버플로가 활성화 된 경우에만 작동합니다.

OP에서 질문하는 문제를 해결할 방법을 모르고 있습니다.

출처

2012-09-06 22:38:33

위치 : 페이 스북 캔버스 (iframe)에서 고정

답변

관련 문제