Comment redimensionner Facebook Toile application (iFrame) correctement?
J'ai besoin d'ajuster la taille du canevas après la mise à jour du contenu d'une page. Je peux le faire explicitement par
FB.Canvas.setSize({ width: 760, height: 1480 });
toutefois, il ne fonctionne pas sans paramètres, c'est à dire .setSize()
.
Aussi, je peux ajuster la hauteur par
FB.Canvas.setAutoResize(true);
mais seulement une augmentation de la - il ne pas réduire la hauteur lorsque le contenu est réduit.
Les lignes suivantes ne fonctionnent pas:
FB.Arbiter.inform("setSize", FB.Canvas._computeContentSize());
FB.Canvas.setSize(FB.Canvas._computeContentSize());
Comment peut-on le faire fonctionner?
Peu plus de commentaires sur le sujet:
- http://developers.facebook.com/blog/post/93
- http://developers.facebook.com/docs/reference/javascript/fb.canvas.setautoresize
Connexes:
- facebook-api: ce qui est Facebook Connect inter-domaine récepteur URL?
- facebook-app: comment puis-je changer la hauteur d'un redimensionnables iframe application?
- La hauteur pousse sur redimensionner lors de la configuration de toile dimensions dynamiquement
Comment contrôlez-vous la taille de votre Facebook Toile apps?
OriginalL'auteur Andrei | 2011-01-14
Vous devez vous connecter pour publier un commentaire.
Ne pas écrire votre propre fonction pour chronométré de redimensionnement Automatique. Fb a un:
Si vous savez quand vous avez besoin de redimensionner l'utilisation
Donc, si vous voulez faire est plus petit lorsque vous cliquez sur un lien, le coller dans une fonction, et ensuite appeler cette fonction plus tard comme:
Vous n'avez pas besoin de définir explicitement la hauteur, mais parfois vous pouvez avoir de la difficulté avec la dynamique xfbml des éléments, comme le module de commentaires. Essayez d'utiliser un événement abonnez-vous rappel:
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/
FB.Event.subscribe('xfbml.render',...
. Les derniers liens sont également à noter dans le cas où si quelqu'un utilise des fonctions sans la lecture de la référence...En répétant ce que l'information? La fixation d'un délai d'attente de la fonction est un hack, qui ne prend pas en compte la page temps de rendu, et setAutoResize est une fonction de délai déjà.
Il est également intéressant de noter que vous ne devriez pas besoin de définir explicitement la hauteur ou de largeur de setSize(); pour travailler. Vous avez juste besoin d'initialisation de l'application avec le bon id de l'application de la première. J'ai tendance à inclure à la fois, comme @Andrei suggéré ci-dessus, après mon bloc de contenu.
OriginalL'auteur Bob
J'ai réussi à faire
.setSize()
de travail en retardant son exécution (comme l'a suggéré sur divers forums):Si vous avez
XFBLM
éléments, en particulierfb:comments
, alors vous avez besoin pour analyser la page avant de définir sa tailleNote, que vous avez besoin pour exécuter ce script après votre bloc de contenu, sinon augmentez l'intervalle de temps (en ms) permettant le serveur web et le navigateur client immeuble le contenu avant de le redimensionnement de la toile.
Cette approche seulement augmente la hauteur de votre page et de ne pas le diminuer. Vous pouvez obtenir la diminution manuellement en tirant à la ligne suivante avant le code ci-dessus
cependant, il existe un inconvénient - la page se met à clignoter en raison de la double redimensionnement.
Aussi, on suggère de course
.setSize
en plusieurs intervalles de temps de compte retardé contenu:Dans ce cas, la page et XFBML éléments deviennent assez blinky.
OriginalL'auteur Andrei
Nous avons des pages dans nos iframe qui ajouter le contenu de la page, puis permettre à l'utilisateur d'actualiser le contenu de la page à la place. Dans ces cas, nous avons vu la même chose, où le contenu n'est pas de réduire le cas échéant.
FB.Toile.setSize() appelle _computeContentSize, ce qui est indiqué ci-dessous:
De la ligne problématique est ici:
Même si le contenu à l'intérieur de votre iframe a diminué, la valeur du corps.offsetHeight ne rétrécit pas.
Pour résoudre ce problème, nous avons fait une version personnalisée de la computeContentSize fonction que seul consulte les docElement pour la hauteur, comme suit:
À tout moment, nous voulons redimensionner et de savoir que le contenu pourrait réduire, nous allons utiliser la fonction personnalisée pour transmettre les contenus de setSize (par exemple, FB.Toile.setSize(rfComputeContentSize())), et à tout moment, nous savons que le contenu ne fera que croître, nous allons utiliser la norme FB.Toile.setSize() fonction.
Noter que nous avons été à l'aide de setAutoGrow() et je n'ai pas vérifier, mais je suis en supposant qu'elle utilise la même fonction pour déterminer la taille. Nous avons désactivé notre appel à setAutoGrow() et devra être vigilant sur l'appel de setSize() à approrpriate fois.
Enregistré ce bug avec Facebook: https://developers.facebook.com/bugs/228704057203827
OriginalL'auteur Wes Gamble
Nous avons couru dans un problème où leur
FB.Canvas
fonctions ne fonctionnent pas, bien que tout a été correctement initialisé, parce qu'ils sont à l'aide de ‘IFRAME’ au lieu de l'iframe dans leur inter-domaine JS de l'installation, par conséquent, pas de compatibilité XHTML.Nous avons corrigé ce par le prototype de notre propre createElement fonction et supérieur de la leur.
Il suffit de mettre cela juste après que vous inclure des Facebooks all.js:
OriginalL'auteur jaset
peu trop de fonctionnalités, mais cet article explique pourquoi vous ne pouvez pas le faire de façon dynamique et fournit la plus facile solution...
http://www.twistermc.com/36764/shrink-facebook-tabs/
La réponse est simple:
Réduire vraiment petit, puis, après une pause utilisez la croissance automatique pour faire la bonne taille... Alice au pays des Merveilles un style.
OriginalL'auteur Kelly B
Bobby réponse est très bonne. La seule chose que je voudrais ajouter c'est que certaines personnes ont eu du succès d'obtenir la page de rétrécir en procédant comme suit:
FB.Canvas.setSize({ width: 760, height: 10 });
Puis suivez avec:
FB.Canvas.setAutoResize();
Vous n'avez pas à utiliser 10, juste quelque chose de plus petit que le minimum de la taille de votre page. Puis le
FB.Canvas.setAutoResize()
devrait aller de l'avant et le faire à la bonne hauteur et de continuer à mettre à jour. Le seul moment où vous devez appelerFB.Canvas.setSize({ width: 760, height: 10 });
nouveau serait si le contenu est réduit de nouveau.Le danger est que si le
FB.Canvas.setAutoResize();
ne fonctionne pas, vous pourriez avoir un contenu qui est coupé.OriginalL'auteur LocalPCGuy
Rien de tout cela a fonctionné pour moi. Assurez-vous de ce type avant la balise de fermeture.
OriginalL'auteur Hendrik
J'ai essayé d'utiliser
FB.Canvas.setSize(e);
pour redimensionner mon application, mais il n'a pas redimensionner à tous.J'ai pris un coup d'oeil dans le Facebook Javascript et que
FB.Canvas.setSize
appelle laFB.Arbiter.inform('setSize',e)
fonction.Si je l'appelle le
FB.Arbiter.inform('setSize',{ width: 760, height: 1480 })
fonction à droite de mon code, la toile se redimensionne correctement.OriginalL'auteur Akkumulator
Cela a fonctionné pour moi:
Notez que vous n'avez pas besoin de FB.init, sauf si vous l'utilisez pour d'autres raisons.
OriginalL'auteur Floyd Wilburn
Lors d'un redimensionnement à la hauteur minimale ne pas oublier de faire un petit peu plus grand qu'il est, afin de tenir compte de la barre de défilement horizontal et quelques pixels supplémentaires que certains navigateurs ajouter, sinon vous allez vous retrouver avec de défilement verticale.
Aussi je ne recommande pas d'utiliser
body
à compter de la hauteur.Cela a fonctionné pour moi :
où m_table est ID table avec tout mon contenu (vous pouvez utiliser
div
à la place).OriginalL'auteur Alex Novikov