Getting a black frame inside the iframe while clicking a tab item in Facebook iFrame application
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>
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");
Seems the target attribute doesnt work with tab-items. So I used a combination of html and css as suggested by a member of Facebook developer forum. This is the link http://forum.developers.facebook.com/viewtopic.php?pid=121903 from where I got the code and changed my app accordingly. The person has given css code to make the link look like Facebook tabs. So anyone having problem with this grey box while using Tab items can make use of that code.
加载中,请稍侯......
精彩评论