IE7 - setAutoGrow不工作

我已经创建了一个Facebook应用程序，我正在使用一个标签的iFrame内。IE7 - setAutoGrow不工作

我正在使用Javascript SDK的setAutoGrow函数来使iFrame展开直到内容结束。

从我的观察，setAutoGrow函数不能在IE7中工作，我不明白为什么。所有其他浏览器（包括IE8和9）都能正常工作。

出于测试目的，我创建了1500px的渐变。

Example gradient for testing purposed of 1500px height

举个例子，我会后是什么样子的Chrome。正如你所看到的，梯度可以滚动，直到结束（红色）：

Gradient inside iFrame tab works as expected in normal browsers

现在来在IE7中会发生什么。 iFrame的默认高度为800px（如在应用程序设置中定义的）。您可以看到它停在“绿松石”处，并且setAutoGrow函数不会将其扩展到所需的高度（1500px）。

Gradient inside iFrame tab doesnt expand in IE7

我的CSS的重要组成部分，如下所示：

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; 
     }

这是JavaScript代码段，我刚放置在封闭体标签之前和FB-根标签后：

window.fbAsyncInit = function() { 

    FB.init({ 

     appId  : '...', 
     channelUrl : '...', 
     status  : true, 
     cookie  : true, 
     xfbml  : true 

    }); 

    FB.Canvas.setAutoGrow(); 

};

我发现可以追溯到月1日，已通过FB关闭错误报告： https://developers.facebook.com/bugs/209607222498543?browse=search_5009002cb69058a73627413

我已阅读并从以下主题应用提示： Facebook iframe FB.Canvas.setAutoGrow does not auto grow after initial load?

...但似乎没有任何解决的问题。

有没有人有明显的提示，我有监督的东西，或对这个问题的简单的解决方案/解决方法？

当我使用IE7 DebugBar时，我注意到它加载一个名为“dimension_context.php”的URL时出现问题。我将附上截图。

IE7 DebugBar loading problem

来源

2012-08-14 Marcel Kalveram

扎染。激进，伙计。 – 2012-08-14 23:31:13

Prolly不会帮助，但值得一试...放在内容容器后：'

' – 2012-08-15 02:31:55

我认为你应该将'Canvas Height'设置为'Fluid'，但是我认为最好的方法是设置静态高度 - 它风险最小:) – 2012-08-17 11:03:48

我用这可能是它可以帮助你

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

来源

2012-08-17 12:24:10

谢谢，试了一下，但它没有帮助 – 2012-08-17 14:00:16

apps.facebook.com/onlinesocialguru/我使用上面的代码foy我的应用程序的工作.. – 2012-08-17 14:09:45

也在Internet Explorer 7中？ – 2012-08-17 14:31:48

你可以看到here我的标签正在IE7：

<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.min.js" 
type="text/javascript"></script> 
</head> 
<body style="overflow:hidden"> 
<div id="fb-root"></div> 
<!-- YOUR HTML --> 
<script type="text/javascript"> 
window.fbAsyncInit = function() { 
     FB.init({ 
      appId: 0000000000000, // App ID 

      status: true, // check login status 
      cookie: true, // enable cookies to allow the server to access the session 
      oauth: true, // enable OAuth 2.0 
      xfbml: true // parse XFBML 
     }); 

     FB.Canvas.setAutoGrow(); 
     FB.Canvas.setSize({ width: 810, height: 1417 }); 

    }; 



    // Load the SDK Asynchronously 
    (function (d) { 
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; } 
     js = d.createElement('script'); js.id = id; js.async = true; 
     js.src = "//connect.facebook.net/en_US/all.js"; 
     d.getElementsByTagName('head')[0].appendChild(js); 
    } (document)); 
</script> 
</body> 
</html>

我的应用程序设置：

Page Tab宽度：810px
画布宽度：固定
帆布高度：在1147px

固定如果你希望你的标签，以适应不同高度尝试这种在每一页：

<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.min.js" 
type="text/javascript"></script> 
</head> 
<body style="overflow:hidden"> 
<div id="fb-root"></div> 
<!-- YOUR HTML --> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    window.fbAsyncInit = function() { 
     FB.init({ 
      appId: 0000000000000, // App ID 

      status: true, // check login status 
      cookie: true, // enable cookies to allow the server to access the session 
      oauth: true, // enable OAuth 2.0 
      xfbml: true // parse XFBML 
     }); 

     FB.Canvas.setAutoGrow(); 
     FB.Canvas.setSize({ width: 810, height: $(document).height()}); 

    }; 



    // Load the SDK Asynchronously 
    (function (d) { 
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; } 
     js = d.createElement('script'); js.id = id; js.async = true; 
     js.src = "//connect.facebook.net/en_US/all.js"; 
     d.getElementsByTagName('head')[0].appendChild(js); 
    } (document)); 

}); 
</script> 
</body> 
</html>

退房的例子：

https://www.facebook.com/pages/Vpascoal/215529398504982?sk=app_105369212942645 （点击图片）

来源

2012-08-17 15:52:54 vpascoal

我已经测试了这两个网站，但它显示滚动条，当内容的高度超过iFrame的高度，看到这里：[IE7 iframe测试1]（ https://www.dropbox.com/s/h01ttvg9v7hpdi3/ie7-iframe1.png）和[IE7 iFrame测试2]（https://www.dropbox.com/s/ezzmt47e1o3qrun/ie7-iframe2.png）。也许这与我在Virtual Box中虚拟运行IE7的事实有关？你能确认这个滚动条没有出现在你的案例中吗？ – 2012-08-18 07:32:18

嗨！我忘了把它放在我的代码中：尝试一下，现在你不会在IE7中看到任何滚动条 – vpascoal 2012-08-20 09:54:53

你有没有试过通过添加一个随机的GET参数来破坏all.js的缓存呃它？此外，我会重写http：//部分//以便在https处于https模式时，JavaScript文件将正确加载。

<script type="text/javascript" language="javascript" src="//connect.facebook.net/en_US/all.js?v1"></script>

来源

2012-08-21 13:04:51

IE7 - setAutoGrow不工作

回答

相关问题