फेसबुक कैनवास ऐप (iFrame) का सही आकार कैसे बदलें?

Question

मुझे किसी पृष्ठ की सामग्री अपडेट करने के बाद कैनवास आकार समायोजित करने की आवश्यकता है। मैं

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()); 

एक यह काम कर रहा कैसे बना सकते हैं?

विषय पर कुछ और टिप्पणियाँ:

1. http://developers.facebook.com/blog/post/93
2. http://developers.facebook.com/docs/reference/javascript/fb.canvas.setautoresize

संबंधित:

1. facebook-api: what's Facebook Connect cross-domain receiver URL?
2. facebook-app: how can i change the height of a resizeable iframe application?
3. Document height grows on resize when setting canvas dimensions dynamically

आप अपने फेसबुक कैनवास क्षुधा का आकार कैसे नियंत्रित करूं?

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

आप XFBLM तत्वों, विशेष रूप से fb:comments है, तो आप इसके आकार सेट करने से पहले पेज पार्स करने के लिए की जरूरत है:

Answer 1

मैं इसके निष्पादन में देरी (के रूप में विभिन्न मंचों पर सुझाव) द्वारा काम कर .setSize() बनाने में कामयाब रहे

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

ध्यान दें, आप कैनवास का आकार बदलने से पहले सामग्री के निर्माण के वेबसर्वर और ग्राहक ब्राउज़र की इजाजत दी अपनी सामग्री ब्लॉक के बाद इस स्क्रिप्ट को चलाने, अन्यथा समय अंतराल में वृद्धि (ms में) की आवश्यकता है।

यह दृष्टिकोण केवल आपके पृष्ठ की ऊंचाई बढ़ाता है और इसे कम नहीं करता है। आप उपरोक्त

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 तत्वों काफी ब्लिंकी हो जाते हैं।

Answer 2

समयबद्ध ऑटो-आकार बदलने के लिए अपना स्वयं का फ़ंक्शन न लिखें।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/

Answer 3

बॉबी के जवाब बहुत अच्छा है।

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

और फिर साथ यह पालन करें::

FB.Canvas.setAutoResize();

आपके पास केवल एक चीज मैं इसे करने के लिए जोड़ना होगा कि कुछ लोगों को निम्न कार्य करके हटना पेज रही सफलता मिली है है 10 का उपयोग नहीं करना है, बस अपने पृष्ठ के न्यूनतम आकार की तुलना में कुछ छोटा है। फिर FB.Canvas.setAutoResize() आगे बढ़ना चाहिए और इसे उचित ऊंचाई फिर से बनाना चाहिए और अपडेट करना जारी रखना चाहिए। केवल FB.Canvas.setSize({ width: 760, height: 10 }); पर कॉल करने की आवश्यकता होने पर आपको फिर से संक्रमित किया जाएगा।

ऐसा करने का खतरा यह है कि यदि FB.Canvas.setAutoResize(); काम नहीं करता है, तो आपके पास कटौती की जाने वाली सामग्री हो सकती है।

Answer 4

इनमें से कोई भी मेरे लिए काम नहीं करता है। बंद टैग से पहले इसे टाइप करना सुनिश्चित करें।

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

Answer 5

मैं FB.Canvas.setSize(e); उपयोग करने के लिए मेरे एप्लिकेशन आकार बदलने के लिए कोशिश की, लेकिन यह बिल्कुल आकार परिवर्तन नहीं किया।

मैं फेसबुक जावास्क्रिप्ट में एक दृष्टि डाली और पता चला, कि FB.Canvas.setSize कॉल FB.Arbiter.inform('setSize',e) कार्य करते हैं।

यदि मैं अपने कोड से FB.Arbiter.inform('setSize',{ width: 760, height: 1480 }) फ़ंक्शन को कॉल करता हूं, तो कैनवास सही ढंग से आकार बदलता है।

Answer 6

यह मेरे लिए काम किया है:

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

ध्यान दें कि आप FB.init जब तक आप अन्य कारणों के लिए यह प्रयोग कर रहे हैं की जरूरत नहीं है।

Answer 7

हमारे पास हमारे आईफ्रेम में पृष्ठ हैं जो पृष्ठ पर सामग्री जोड़ते हैं और फिर उपयोगकर्ता को पृष्ठ के भीतर सामग्री को रीफ्रेश करने की अनुमति देते हैं। इन मामलों में, हमने वही चीज़ देखी, जहां उपयुक्त होने पर सामग्री कम नहीं होगी।

एफबी.कैनवास।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 का मूल्य हटना नहीं होगा ।

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

कभी भी हम आकार बदलने और पता सामग्री हटना सकता है कि हम आपको चाहते हैं:

इस का समाधान करने के लिए, हम चाहते हैं कि केवल ऊंचाई के लिए docElement सलाह भी लेता है, तो जैसे computeContentSize समारोह के एक कस्टम संस्करण बनाया कस्टम फ़ंक्शन का उपयोग करने के लिए सामग्री setSize पारित करने के लिए (जैसे FB.Canvas.setSize (rfComputeContentSize())), और किसी भी समय हम जानते हैं कि सामग्री केवल बढ़ेगा, हम मानक FB.Canvas.setSize() फ़ंक्शन का उपयोग करेंगे।

ध्यान दें कि हम setAutoGrow() का उपयोग कर रहे थे और मैं जाँच नहीं था, लेकिन यह सोचते हैं कि यह एक ही समारोह का उपयोग करता है आकार निर्धारित करने। हम अपने कॉल अक्षम setAutoGrow करने के लिए() और approrpriate समय पर setSize() कॉल के बारे में सतर्क रहने के लिए होगा। , क्योंकि वे 'IFRAME' का उपयोग कर रहे iframe के बजाय उनके पार में https://developers.facebook.com/bugs/228704057203827

Answer 8

हम एक ऐसी समस्या है, जहां उनके FB.Canvas कार्यों काम नहीं किया में भाग है, हालांकि सब कुछ ठीक से प्रारंभ किया गया था:

इस बग Facebook के साथ लॉग इन डोमेन जेएस सेटअप, इसलिए कोई एक्सएचटीएमएल संगतता नहीं है।

हम अपने createElement समारोह प्रोटोटाइप और उनकी अधिभावी द्वारा इस तय की। बस इस सही डाल के बाद आप Facebooks all.js में शामिल हैं:

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

Answer 9

जब न्यूनतम ऊंचाई के लिए आकार बदलने के लिए मत भूलना यह थोड़ा बड़ा की तुलना में यह है, थोड़ा क्षैतिज स्क्रॉल पट्टी और कुछ अतिरिक्त पिक्सल के लिए खाते बनाने के लिए कि कुछ ब्राउज़र जोड़ते हैं, अन्यथा आप लंबवत स्क्रॉल के साथ समाप्त हो जाएंगे।

इसके अलावा, मैं body उपयोग करने के लिए ऊंचाई गिनती करने के लिए सलाह नहीं देते।

यह मेरे लिए काम किया:

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

जहां m_table मेरे सभी सामग्री के साथ तालिका आईडी है (आप div बजाय उपयोग कर सकते हैं)। अतिरिक्त कार्यक्षमता के

Answer 10

बिट, लेकिन इस लेख बताता है कि क्यों आपको लगता है कि गतिशील रूप से करते हैं और सबसे आसान समाधान प्रदान करता है नहीं कर सकते ... http://www.twistermc.com/36764/shrink-facebook-tabs/ जवाब सरल है: यह वास्तव में छोटा है, तो एक ठहराव उपयोग AutoGrow के बाद के लिए संकुचित करें इसे सही आकार बनाओ ... एलिस इन वंडरलैंड शैली।

• मैं क्योंकि देखने के एक देव और उपयोगकर्ता दृष्टिकोण से इस 1/4 के बारे में दूसरा द्वारा चीजों को धीमा कर देती है, और उपयोगकर्ता स्क्रॉलबार के एक छोटे से फ्लैश हो जाता है सबसे आसान कहते हैं ...