单击 Facebook iFrame 应用程序中的选项卡项目时，在 iframe 内出现黑框

发布于 2024-09-08 14:34:29 字数 3659 浏览 7 评论 0原文

我正在为现有网站开发 Facebook iFrame 应用程序。我使用代码加载网页。我还有一个选项卡部分，其中包含选项卡项目“Home”、“InviteFriends”等。但是选项卡和加载的网页之间有很多空白区域。

这是我的 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>

，而且当我单击“邀请朋友”选项卡时，我的屏幕上会在加载的网页上方的空白处看到一个黑框。如果我单击黑色区域，它将导航到“邀请”页面。如何去掉这个黑框，直接进入邀请页面？

这是我的 inform.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>

原文

I am developing a Facebook iFrame application for an existing site. I load the web page using the <iframe> code. I also have a tab section, with tab-items Home, InviteFriends etc. But there is a lot of empty space between the tabs and the loaded web page.

This is my index.php file

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

And also when I click on the Invite Friends tab, I get a black box on my screen above the loaded web page in the place of the empty space. And if I click the black area, it navigates to the Invite page. How to remove this black box, and navigate directly to the invite page?

This is my invite.php file:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

看轻我的陪伴 2024-09-15 14:34:29

在 iframe 应用程序中，我通过 JavaScript 重定向客户端解决了黑色（或灰色）层问题，使用

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

In an iframe application, I solved the black (or grey) layer problem by redirecting the client via javascript, using

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

回复收藏 0 原文

绝不服输 2024-09-15 14:34:29

目标属性似乎不适用于选项卡项。所以我按照 Facebook 开发者论坛成员的建议使用了 html 和 css 的组合。这是链接 http://forum.developers.facebook.com/viewtopic。 php?pid=121903 从我获取代码的地方并相应地更改了我的应用程序。该人提供了 CSS 代码，使链接看起来像 Facebook 选项卡。因此，任何在使用选项卡项时遇到此灰色框问题的人都可以使用该代码。

回复收藏 0 原文

~没有更多了~