位置：固定在Facebook畫布（iframe）

我們希望有一個位置固定的DOM元素：固定在我們的Facebook畫布應用程序中，並具有流暢的畫布大小。因爲應用程序在canvas iframe中運行，所以只需使用一個簡單的css位置：fixed不起作用：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擁有自己的滾動條和位置：固定作品。但是這種方法有一些其他的小缺點。所以我仍然感興趣的是，如果可以通過液體高度應用程序來解決問題。 – 2012-03-14 13:18:21

我試圖使用相同的方法來定位我的Facebook iFrame中的固定元素，並且好像我面臨一個新問題 - >在我的開發人員控制檯中顯示的是「Uncaught SecurityError：阻止了一個源於框架」mydomain.com「框架來源「facebook.com」，被訪問的框架將「document.domain」設置爲「facebook.com」，但是請求訪問的框架沒有設置，都必須將「document.domain」設置爲相同的值以允許訪問。「你也遇到過嗎？ – 2015-08-26 08:44:09

我懷疑它與您如何設置應用HTML佈局有關。我在我的測試應用程序中做了一個快速測試，它工作。文檔的主體只包含一個帶絕對定位的div，其中包含帶位置的anchor div：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>

你可以看到在工作here的例子（我只是消除了該國的限制，如果您有任何理由無法訪問應用程序告訴我，我會檢查設置再次）。

來源

2012-06-15 15:52:37

應用程序無法正常工作：包豪斯應用程序「的應用程序使用‘’已被限制錯誤而來自包豪斯應用程序加載頁面」 – 2012-06-16 13:27:58

我擔心這樣的事情會發生。我會在星期一嘗試修復它，當我回到辦公室。同時，如果您有自己的測試應用程序，您可以嘗試使用我提供的代碼，如果您願意的話。乾杯! – 2012-06-16 16:23:46

@nblumoe，我無法修復我的Facebook測試應用程序的權限，我需要將其用於其他測試。我提供的答案是否有幫助？你有沒有嘗試使用代碼？ – 2012-06-20 15:32:30

只是爲了總結註釋到第一個答案：通過Rorok_89建議實際上並不在問題描述的確切使用情況下的工作方法。它只適用於iframe上啓用了溢出的情況。

我不知道有任何的方式來解決由OP問的問題。

來源

2012-09-06 22:38:33

位置：固定在Facebook畫布（iframe）

回答

相關問題