Question

我创建了一个Facebook Canvas应用程序，并将高度和宽度设置为流畅。然而，不是Facebook显示100％x 100％iframe，我得到的是100％宽和800px高帧。页面内容的其余部分正在被Facebook切断。这是我的下面的代码，当我将Facebook网站应用程序设置高度属性设置为流体时，任何人都可以找出为什么我没有得到高度为100％的iframe？

我甚至尝试过高度：100％用于html和div标签，但仍然没有成功。我已经得出结论，它必须再次与Facebook有关，以及他们如何处理他们的Canvas应用程序设计。

这次Facebook搞砸了什么......

另一方面，任何人都有任何带有CSS的Canvas HTML代码，在这些代码中他们可以让他们的Facebook应用程序居中，无滚动条，流畅的高度....

这是我的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
  <title>My New App</title>
  <style>
        html {
           width: 750px;
           height: 100%;
        }

        #wrapper {
            width: 750px;
            height:100%;
            border:1px solid #000;
            margin: 0 auto;
            text-align:left;
        }
   </style>
</head>
<body>
    <div id="fb-root"></div>
    <script type="text/javascript">
      window.fbAsyncInit = function() {
        FB.init({
            appId: '<%= config.appID %>',
            status: true, // check login status
            cookie: true, // enable cookies to allow the server to access the session
            xfbml: true, // parse XFBML
            channelUrl: document.location.protocol + '//<%- config.siteUrl %>channel.html', // Channel File
            oauth: true
        });
        FB.Canvas.setAutoGrow();

        // Listen to the xfbml.render and set canvas size according to ajax rendered updates
        FB.Event.subscribe('xfbml.render', function(response) {
            FB.Canvas.setAutoGrow();
        });
      };

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

    <div id="wrapper">
      <h1>My New App</h1>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <h1>My New App</h1>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <h1>My New App</h1>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <h1>My New App</h1>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <h1>My New App</h1>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <h1>My New App</h1>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <h1>My New App</h1>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <h1>My New App</h1>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <h1>My New App</h1>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <h1>My New App</h1>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <h1>My New App</h1>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <h1>My New App</h1>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <h1>My New App</h1>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
      <p>Helo world!</p>
    </div>
</body>
</html>

Answer 1

我发现了问题：

在Facebook上的应用程序设置中有以下两个属性：

Canvas Url和Secure Canvas Url。

不幸的是我把它放到Canvas Url中：https://www.myweb.net/ 而不是：http://www.myweb.net/

当我从浏览切换到安全浏览时，会发生Javascript错误，因为它试图通过安全的https连接加载Facebook资源。换句话说，由于该错误，FB.Canvas.setAutoGrow（）无法运行，因此我的Canvas页面似乎切断了内容，而实际上它根本就没有运行。

欢呼声

Facebook Canvas App高度

1 个答案: