Talk:Resizable IFrame
From Facebook Developer Wiki
[edit] the demo works in firefox but not chrome
some of it works in chrome... but that part where the blue box resizes, creates a scrollbar in the iframe --2011423 21:15, 13 September 2009 (PDT)
[edit] http://apps.new.facebook.com/wzhu_public_resize/ Not working in IE7, FF2, FF3
Cannot get the demo to work in IE7 and FF2. Have not tried IE6. Initial load of page is missing everything below the File listing header. [Fix Height to 1500pt] button doesn't do anything. When []Toggle box size is checked, the blue box grows big, pushing all the content below it off the screen and no way to see it. [Track window resize event] button doesn't seem to do anything
[edit] Resize only to height of current window (SOLVED)
UPDATE: Mr. Wei Zhu pointed out that I had the iframe settings in the facebook app edit page on 'SmartSize' instead of Resizable. I can't believe how I missed that, but after that change it works perfectly! In prdocution, the two FBDebug lines should be removed.
I use this:
<script type="text/javascript">
//<![CDATA[
Element.observe(window,'load', function() {
FB_RequireFeatures(["XFBML", "CanvasUtil"], function() {
FB.FBDebug.isEnabled = true;
FB.FBDebug.logLevel = 4;
FB.init('xxxxxxxxxxxxxxxxxx','/xd_receiver.html', {});
FB.XdComm.Server.init('/xd_receiver.html');
FB.CanvasClient.startTimerToSizeToContent();
});
});
//]]>
</script>
The page is an IFrame (not FBML) and it is resizable.
The result is that the scrollbars disappear, but the content is always sized to the size of the browser window. The rest is cut off and by lack of the iframe scrollbars, you can't reach the hiddne content at all.
In the debug console, it DOES says it's resizing to 1195 pixels, but if the browser window is only 600px, then that will be the real size of the iframe.
Server.send: handler=iframeOuterServer XFBML (line 54) data: 0: 0 1: iframeInnerClient 2: setCanvasHeight 3: 1195px 4: false XFBML (line 54)
I tested on Linux/Firefox 3.0.x, Mac OS X Firefox 3.5.x and Safari, WinXP Firefox 3.0.x, IE7, and Chrome.
REPEAT UPDATE: Mr. Wei Zhu pointed out that I had the iframe settings in the facebook app edit page on 'SmartSize' instead of Resizable. I can't believe how I missed that, but after that change it works perfectly! In prdocution, the two FBDebug lines should be removed.
[edit] btw
This doesn't work in opera. Just btw. --504316694 16:22, 13 March 2008 (PDT)
[edit] a2360268778_window is not defined
I am getting this error msg: a2360268778_window is not defined [Break on this error] if (a2360268778_window.FB && a2360268778_window.FB.FeatureLoader && a236026877... fbml_static_get.p... (line 6)
It also does not work in Safari.
[edit] I'm can't used javascript when add script resizable iframe
I put
<script src="http://static.ak.facebook.com/js/api_lib/v0.2/FeatureLoader.js" type="text/javascript"> </script>
<script type="text/javascript">
FB_RequireFeatures(["CanvasUtil"], function()
{
//You can optionally enable extra debugging logging in Facebook JavaScript client
//FB.FBDebug.isEnabled = true;
//FB.FBDebug.logLevel = 4;
FB.XdComm.Server.init("/states/xd_receiver");
FB.CanvasClient.startTimerToSizeToContent();
});
</script>
all my javascript can't used. because not correct standard. help me!!!!!! thank you
[edit] I can't get any of this to work!
Maybe there's a gem of information I'm missing here. I've reduced my facebook page to:
<fb:iframe width='100%' height=100 src='[full path]zframe.html' resizable='true' />
and my iframe code to:
<script src="http://static.ak.facebook.com/js/api_lib/v0.2/FeatureLoader.js" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(["CanvasUtil"], function()
{
FB.XdComm.Server.init("/scripts/xd_receiver.htm");
FB.CanvasClient.startTimerToSizeToContent();
});
</script>
And nothing! I'm pretty sure I have all the elements (I can alert the canvas objects) and I have the xd_receiver thingy but nothing! Nix! Nada!
It works great for me, but how can I detect if the iframe is resizable from within the iframe?
[edit] FB.Uri is not a constructor
as soon as I add the resizable="true" tag to fb:iframe, I get the following javascript error message:
FB.Uri is not a constructor [Break on this error] var currentUri = new FB.Uri(window.location.href);
and all of a sudden nothing is working!
[edit] Weird problems in IE7/Safari
I got the below to work in FF3. My app is set to iframe mode, resizeable. It does not work in Safari or IE7. In those browsers, the iframe gets a scrollbar. Specifically,
print '<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.debug.js" type="text/javascript"></script>';
print '<script src="'; print $_REQUEST['fb_sig_in_new_facebook'] ? 'http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php' : 'http://static.ak.facebook.com/js/api_lib/v0.3/FeatureLoader.js'; print '" type="text/javascript"> </script>';
print '<script type="text/javascript">'; print "FB.XdComm.Server.init('/xd_receiver.html');"; print "FB.CanvasClient.startTimerToSizeToContent();"; print '</script>';
[edit] I believe FB_HiddenIFrameContainer is wrong
Use the ID FB_HiddenContainer for the DIV tag instead of FB_HiddenIFrameContainer.
(This works - SE 17/05/2009)
[edit] Can't get this to work in IE7 and ASP.NET IFrame app
I have a master page where I've setup the v0.4 feature loader (after all the other content). While it does resize, it only does it if the content isn't too large. For example here's a page where it does work and the debug output:
However I created a page with a few hundred lines of text and it would cut off the display somewhere down the near bottom of the page. So no scrollbars but cuts off the content. There's also no debug messages.
--708581200 19:49, 19 November 2008 (PST)
