Menu
I have created a facebook application that I am using inside a tab's iFrame.
I am using the setAutoGrow function of the Javascript SDK to make the iFrame expand until the end of the content.
From my observations, the setAutoGrow function does not work in IE7, and I can't figure out why. All other browsers (including IE8 and 9) are working correctly.
For testing purposes, I have created a gradient that is 1500px high.
As an example, I will post what it looks like in Chrome. As you can see, the gradient can be scrolled until the end (red color):
And now comes what happens in IE7. The iFrame has a default height of 800px (as defined in the app settings). You can see that it stops at "turquoise", and the setAutoGrow function does not extend it to the desired height (1500px).
The important part of my CSS looks as follows:
body, html {
overflow: hidden;
margin: 0; padding: 0;
}
#wrapper {
margin: 0 auto;
width: 810px;
}
#content {
background: url(../img/bg.jpg) top left no-repeat;
height: 1500px;
}
And this is the javascript snippet I've placed just before the closing body-tag and after the fb-root tag:
window.fbAsyncInit = function() {
FB.init({
appId : '...',
channelUrl : '...',
status : true,
cookie : true,
xfbml : true
});
FB.Canvas.setAutoGrow();
};
I have found a bug report that dates back to the 1st of August, which has been closed by FB: https://developers.facebook.com/bugs/209607222498543?browse=search_5009002cb69058a73627413
I have read and applied the hints from the following topic: Facebook iframe FB.Canvas.setAutoGrow does not auto grow after initial load?
... but nothing seems to solve the problem.
Does anyone have an obvious hint, something I have overseen, or an easy solution/workaround for this problem?
While I was using IE7 DebugBar I noticed that it was having a problem loading a URL called "dimension_context.php". I will attach the screenshot.
979
I am using this may be it helps you
<html>
<body>
<div id="fb-root">
</div>
<script type="text/javascript" language="javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" language="javascript">
FB.init({
appId: 'APPID',
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true// parse XFBML
});
window.fbAsyncInit = function () {
FB.Canvas.setSize();
}
// FB.Canvas.setAutoResize();
FB.Canvas.setAutoGrow(7);
</script>
<form></form>
</body>
</html>
Have you tried busting the all.js's cache by adding a random GET parameter to it? Also, I'd rewrite the http:// part to // so the javascript file would load properly in case facebook is in https mode.
<script type="text/javascript" language="javascript" src="//connect.facebook.net/en_US/all.js?v1"></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
