堆栈内存溢出
  繁体   English   中英

Facebook Canvas应用高度

[英]Facebook Canvas App Height

 原文  2013-12-17 11:38:47  6   1    facebook/ facebook-javascript-sdk

问题描述

我创建了一个Facebook Canvas应用程序，并将“高度”和“宽度”设置为流畅。 但是，我得到的不是Facebook显示100％x 100％iframe，而是100％宽和800px高的帧。 页面内容高度的其余部分已被Facebook切断。 这是下面的代码，有人能弄清楚为什么在将Facebook网站应用设置的height属性设置为fluid时，为什么无法获得高度为100％的iframe？

我什至尝试将height：100％用于html和div标签，但仍然没有成功。 我已经得出结论，这必须再次与Facebook有关，以及它们如何进行Canvas应用程序设计。

这次Facebook搞砸了什么...

附带说明一下，没有人有任何带有CSS的Canvas HTML代码，他们可以在其中使Facebook App居中，无滚动条，流体高度...。

这是我的代码： 

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

1 个解决方案

解决方案1
 0  2013-12-18 03:32:06

我发现了问题：

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

画布网址和安全画布网址。

不幸的是，我将其放入Canvas Url： https : //www.myweb.net/而不是： http : //www.myweb.net/

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

干杯

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 将facebook canvas应用程序的高度设置为等于Facebook边栏的高度 iframe中Facebook应用Canvas的全高 Facebook 应用程序 - Javascript 设置 Canvas 的高度？ Facebook Canvas APP（Iframed）Auto-Height Resize 为什么Facebook的.setSize（）只能增加Canvas应用程序的高度？ Facebook评论框和画布高度 仅在Facebook画布上的Facebook应用 Facebook Canvas应用未加载 识别Facebook应用是否在画布中 Facebook应用程序 - 移动和画布？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM