2010-07-09 1 views
1

Je développe une application iFrame Facebook pour un site existant. Je charge la page Web en utilisant le code . J'ai aussi une section d'onglet, avec des éléments d'onglet Accueil, InviteFriends, etc. Mais il y a beaucoup d'espace vide entre les onglets et la page Web chargée.Obtention d'un cadre noir à l'intérieur de l'iframe en cliquant sur un élément de l'onglet dans l'application Facebook iFrame

Ceci est mon fichier index.php

<?php 
    require_once 'appinclude.php'; 
    $user_id = $facebook->require_login(); 
?> 

<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:fb="http://www.facebook.com/2008/fbml"> 

<head></head> 

<body> 
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" 
     type="text/javascript"></script> 

<div id="FB_HiddenIFrameContainer" style="display:none; position:absolute; left:-100px; top:-100px; width:0px; height: 0px;"></div> 

<fb:serverfbml style="height:200px; width:760px;"> 
<script type="text/fbml"> 
    <fb:fbml> 
    <fb:tabs> 
     <fb:tab-item href='http://my_site_ip/my_app_folder/' title='Home'  selected='true' target="_TOP"/> 
    <fb:tab-item href='http://my_site_ip/my_app_folder/fav.php' title='My Favorites' target="_TOP"/> 
    <fb:tab-item href="http://my_site_ip/my_app_folder/invite.php" title="Invite Friends" target="_TOP"/>  
    </fb:tabs> 
    </fb:fbml> 
</script> 
</fb:serverfbml> 

<?php echo '<iframe name="qantas" height="640px" width="740px" frameborder="0" resizeable="true" scrolling="no" style="border:none" src="my_url" target="_TOP"></iframe>';?> 

<script type="text/javascript"> 

    FB.init("my_api_key", "../channel/xd_receiver.htm"); 

    FB_RequireFeatures(["CanvasUtil"], function(){ 
     FB.XdComm.Server.init("../channel/xd_receiver.htm"); 
     FB.CanvasClient.startTimerToSizeToContent(); 
}); 

    </script>  
</body> 
</html> 

Et quand je clique sur le Inviter des amis onglet, je reçois une boîte noire sur mon écran au-dessus de la page Web chargée à la place de l'espace vide. Et si je clique sur la zone noire, il navigue jusqu'à la page Inviter. Comment supprimer cette boîte noire et accéder directement à la page d'invitation?

Ceci est mon fichier invite.php:

<?php 
    require_once 'appinclude.php'; 
    $user_id = $facebook->require_login(); 
?> 

<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:fb="http://www.facebook.com/2008/fbml"> 

<head></head> 

<body> 

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" 
type="text/javascript"> 
</script> 

<fb:serverfbml style="width: 776px;"> 
<script type="text/fbml"> 
    <fb:fbml> 
    <fb:tabs> 
    <fb:tab-item href='http://apps.facebook.com/my_canvas_url/' title='Home'  selected='true' target="_TOP"/> 
<fb:tab-item href='http://apps.facebook.com/my_canvas_url/fav.php' title='My Favorites' target="_TOP"/> 
<fb:tab-item href="http://apps.facebook.com/my_canvas_url/invite.php" title="Invite Friends" target="_TOP"/>  
    </fb:tabs> 

<fb:request-form action="http://my_localhost_ip/FacebookApp/" 
     method="POST" 
     invite="true" 
     type="myWEb" 
     target="_parent" 
     content="<fb:name uid='$user_id' useyou='false'></fb:name> is a member of myWeb.com and would like to share that experience with you.To register, simply click on the 'Register' button below.<fb:req-choice url='http://apps.facebook.com/my_canvas_url/index.php' label='Register'/>"> 

    <fb:multi-friend-selector showborder="false" actiontext="Invite your Facebook Friends to use myWeb" /> 

    </fb:request-form> 
    </fb:fbml> 
</script> 
</fb:serverfbml> 

<script type="text/javascript"> 
     FB.init("my_api_key", "../channel/xd_receiver.htm"); 
</script> 
</body> 
</html> 
+0

Maintenant, j'ai changé le href dans les onglets pour pointer vers mon site. Maintenant, au lieu de la couche noire, j'obtiens la page d'invitation, mais dans cette petite case. Target = "_ top" et target = "_ parent" ne font aucun changement. – Angeline

Répondre

0

Semble l'attribut target ne fonctionne pas avec les tabulations. J'ai donc utilisé une combinaison de html et css comme suggéré par un membre du forum des développeurs Facebook. C'est le lien http://forum.developers.facebook.com/viewtopic.php?pid=121903 d'où j'ai obtenu le code et modifié mon application en conséquence. La personne a donné un code CSS pour que le lien ressemble à des onglets Facebook. Ainsi, toute personne ayant un problème avec cette boîte grise lors de l'utilisation d'éléments Tab peut utiliser ce code.

0

Dans une application iframe, je résolu le problème de la couche noire (ou gris) en redirigeant le client via javascript, en utilisant

window.top.location.replace("http://apps.facebook.com/canvas_url/page_with_dark_layer"); 
+0

maintenant je reçois une erreur de page introuvable. :-(au lieu de ce calque noir – Angeline

+0

il n'y a pas de paramètre "layer" à la fin de l'URL, je l'ai juste corrigé dans ma réponse, il suffit de donner l'URL de l'onglet "inviter des amis" à la position.replace de javascript() – hayalci

+0

eh bien, je n'avais pas remarqué de paramètre de calque, donc j'avais donné seulement l'url de l'onglet "inviter des amis" (c'est ce que vous suggérez maintenant, rt?), mais je reçois toujours cette couche Quand j'utilise Fonction 'onclick', devrais-je garder' href = '' 'ou' href = '#' '? – Angeline

Questions connexes