如何正確調整Facebook Canvas應用程序（iFrame）的大小？

我需要在更新頁面內容後調整畫布大小。我可以明確地通過如何正確調整Facebook Canvas應用程序（iFrame）的大小？

FB.Canvas.setSize({ width: 760, height: 1480 });

但是，它不工作，沒有參數，即.setSize()。

另外，我可以通過

FB.Canvas.setAutoResize(true);

但調整高度僅增加 - 它不會降低高度時，含量降低。

以下行不起作用：

FB.Arbiter.inform("setSize", FB.Canvas._computeContentSize()); 
FB.Canvas.setSize(FB.Canvas._computeContentSize());

一個怎樣才能使它的工作？

一些關於這個問題更多的評論：

相關：

你如何控制你的Facebook應用程序畫布的大小？

來源

2011-01-14 Andrei

我已成功地使.setSize()通過延遲它的執行（對各種論壇的建議）工作：

window.setTimeout(function() { 
    FB.Canvas.setSize(); 
}, 250);

如果你有XFBLM元素，尤其是fb:comments，那麼你就需要設置其大小之前解析頁面

window.setTimeout(function() { 
    FB.XFBML.parse(); 
    FB.Canvas.setSize(); 
}, 250);

注意，你需要你的內容塊後運行該腳本，否則增加的時間間隔（毫秒），允許Web服務器和客戶端瀏覽器構建調整畫布前的內容。

這種方法只會增加頁面的高度，並不會降低頁面的高度。您可以通過實現燒製以下行的代碼之前上述

FB.Canvas.setSize({height: 480}); // min height - .setSize() won't reduce it

但是手動減少，有一個缺點 - 網頁會由於雙調整大小閃爍。

此外，還有一個建議在若干時間間隔運行.setSize佔推遲的內容：

FB.Array.forEach([300, 600, 1000, 2000], function(delay) { 
    setTimeout(function() { 
    FB.XFBML.parse(); 
    FB.Canvas.setSize(); 
    }, delay) 
});

在這種情況下，頁面和XFBML元素變得相當的Blinky。

來源

2011-01-15 07:32:58 Andrei

如果你是做得對，你不應該需要任何這一點。 – Bob 2011-05-05 16:11:44

不要編寫自己的定時自動調整大小的函數。FB有一個：

FB.Canvas.setAutoResize();

如果你知道當你需要調整它使用

FB.Canvas.setSize()

所以，如果你想在更小的，當你點擊一個鏈接，把它貼在一個函數，然後調用該函數後想：

function sizeChangeCallback() { 
    FB.Canvas.setSize(); 
    } 

//start some function or on click event - here i used jquery 
$("#something").click(function() { 
    sizeChangeCallback() 
});

你並不需要設置一個明確的高度，但有時你可以有動態XFBML元素，如評論插件的麻煩。嘗試使用一個事件訂閱回調：

FB.Event.subscribe('xfbml.render', function(response) { 
    FB.Canvas.setAutoResize(); 
    });

http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setSize/

http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoResize/

http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/

來源

2011-03-31 16:38:00 Bob

重複相同的信息不會使任何人受益，是嗎？感謝`FB.Event.subscribe（'xfbml.render'，...`雖然。最後的鏈接也值得一提，如果有人使用沒有閱讀引用的功能... – Andrei 2011-05-03 18:41:47

重複哪些信息？設置超時函數是一種破解，它不考慮頁面渲染時間，並且setAutoResize已經是一個超時函數。 – Bob 2011-05-05 16:04:21

Bobby的答案是非常好的。只有我會添加到它的事情是，有些人已經成功獲得該頁面通過做收縮以下幾點：

FB.Canvas.setSize({ width: 760, height: 10 });

然後與跟隨它：

FB.Canvas.setAutoResize();

你不不必使用10，只是比頁面的最小尺寸小。然後FB.Canvas.setAutoResize()應該繼續，並再次使其適當的高度，並繼續更新。只有當內容再次縮小時，您才需要再次調用FB.Canvas.setSize({ width: 760, height: 10 });。

這樣做的危險是如果FB.Canvas.setAutoResize();不起作用，您可能會截斷內容。

來源

2011-05-02 17:51:43 LocalPCGuy

這一切都爲我工作。確保在結束標記之前輸入它。

<div id="fb-root"></div> 
<script type="text/javascript"> 
window.fbAsyncInit = function() { 

//Der folgende Code ändert die Grösse des iFrames alle 100ms 
FB.Canvas.setAutoResize(100); 

}; 
(function() { 
var e = document.createElement('script'); 
e.async = true; 
e.src = document.location.protocol + 
'//connect.facebook.net/en_US/all.js'; 
document.getElementById('fb-root').appendChild(e); 
}()); 

</script>

來源

2011-08-31 07:59:20 Hendrik

我試圖使用FB.Canvas.setSize(e);來調整我的應用程序的大小，但它根本沒有調整大小。

我看了一下在Facebook的Javascript中發現，那FB.Canvas.setSize叫FB.Arbiter.inform('setSize',e)函數。

如果我從我的代碼調用FB.Arbiter.inform('setSize',{ width: 760, height: 1480 })函數，畫布會正確調整大小。

來源

2011-09-15 18:50:24 Akkumulator

這工作對我來說：

<script type='text/javascript'> 
window.onload=function() { 
    FB.Canvas.setSize({width:760,height:document.body.offsetHeight}); 
} 
</script>

需要注意的是，除非你正在使用其他別的原因你不需要FB.init。

來源

2011-09-15 19:45:51

我們在我們的iframe中添加了頁面，將內容附加到頁面上，然後允許用戶刷新頁面內的內容。在這些情況下，我們看到了同樣的情況，在適當的情況下內容不會縮小。

FB.Canvas。的setSize（）調用_computeContentSize，其如下所示：

_computeContentSize: function() { 
    var body = document.body, 
     docElement = document.documentElement, 
     right = 0, 
     bottom = Math.max(
     Math.max(body.offsetHeight, body.scrollHeight) + 
      body.offsetTop, 
     Math.max(docElement.offsetHeight, docElement.scrollHeight) + 
      docElement.offsetTop); 

    if (body.offsetWidth < body.scrollWidth) { 
    right = body.scrollWidth + body.offsetLeft; 
    } else { 
    FB.Array.forEach(body.childNodes, function(child) { 
     var childRight = child.offsetWidth + child.offsetLeft; 
     if (childRight > right) { 
     right = childRight; 
     } 
    }); 
    } 
    if (docElement.clientLeft > 0) { 
    right += (docElement.clientLeft * 2); 
    } 
    if (docElement.clientTop > 0) { 
    bottom += (docElement.clientTop * 2); 
    } 

    return {height: bottom, width: right}; 
},

問題的行是在這裏：

bottom = Math.max(
     Math.max(body.offsetHeight, body.scrollHeight) + 
     body.offsetTop, 
     Math.max(docElement.offsetHeight, docElement.scrollHeight) + 
     docElement.offsetTop);

即使你的iframe裏面的內容已今非昔比，body.offsetHeight的價值不會縮水。

爲了解決這個問題，我們做了computeContentSize功能的定製版本，只有諮詢的docElement的高度，就像這樣：

function rfComputeContentSize() { 
    var body = document.body, 
     docElement = document.documentElement, 
     right = 0, 
     bottom = Math.max(docElement.offsetHeight, docElement.scrollHeight) + docElement.offsetTop; 

    if (body.offsetWidth < body.scrollWidth) { 
    right = body.scrollWidth + body.offsetLeft; 
    } else { 
    FB.Array.forEach(body.childNodes, function(child) { 
     var childRight = child.offsetWidth + child.offsetLeft; 
     if (childRight > right) { 
     right = childRight; 
     } 
    }); 
    } 
    if (docElement.clientLeft > 0) { 
    right += (docElement.clientLeft * 2); 
    } 
    if (docElement.clientTop > 0) { 
    bottom += (docElement.clientTop * 2); 
    } 

    return {height: bottom, width: right}; 
}

任何時候我們要調整大小和知道的內容有可能縮小，我們將使用自定義函數將內容傳遞給setSize（例如FB.Canvas.setSize（rfComputeContentSize（））），並且無論何時我們知道內容只會增長，我們將使用標準的FB.Canvas.setSize（）函數。

請注意，我們使用setAutoGrow（），我沒有檢查，但我假設它使用相同的函數來確定大小。我們禁止了對setAutoGrow（）的調用，並且必須警惕在approrpriate時間調用setSize（）。在他們的交叉https://developers.facebook.com/bugs/228704057203827

來源

2012-01-03 22:48:45

我們遇到了一個問題，即他們FB.Canvas功能沒有工作，儘管一切都正確的初始化，因爲他們使用的是「IFRAME」，而不是IFRAME：

記錄此錯誤與Facebook域的JS設置，因此沒有XHTML兼容性。

我們通過原型化我們自己的createElement函數並覆蓋它們來解決這個問題。只要把這個權利，你有Facebook的all.js之後：

document.__createElement = document.createElement; 
document.createElement = function(tagName) { 
      return document.__createElement(tagName.toLowerCase()); 
}

來源

2012-05-24 09:28:24 jaset

當調整到最小高度不要忘記將它一點點大於它是，考慮到水平滾動條和一些額外的像素某些瀏覽器會添加，否則您將以垂直滾動結束。

另外我不建議使用body來計算身高。

這爲我工作：

window.fbAsyncInit = function() 
{FB.Canvas.setSize({height:document.getElementById('m_table').offsetHeight+40});}

其中m_table是我的所有內容表ID（你可以使用div代替）。

來源

2012-07-03 01:23:48

位的多餘功能，但這篇文章解釋了爲什麼你不能做到這一點動態，並提供了最簡單的解決 ... http://www.twistermc.com/36764/shrink-facebook-tabs/ 答案很簡單：收縮它真的很小，則暫停使用自動增長後，使它成爲正確的尺寸......愛麗絲夢遊仙境風格。

我說最簡單的，因爲從一個開發和用戶點這會減慢速度約1/4秒，而用戶獲取滾動條的極細小的快閃...

來源

2012-07-19 21:10:36

如何正確調整Facebook Canvas應用程序（iFrame）的大小？

回答

相關問題