更新fb iframe高度

时间:2012-10-12 09:56:29

标签: facebook facebook-javascript-sdk

是否可以更新Facebook iframe高度?

这是场景。我有一个带有PHP页面的Facebook应用程序,但是当我点击菜单时,它会获得之前的iframe高度,并且它不会自动调整当前内容的iframe高度。

    <link rel="stylesheet" href="" type="text/css" >
    <style>
    .nav li {
    background-color: #fff;

    font-family: Century Gothic;
    list-style: none outside none;
    margin-bottom: 1px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-top: 5px;
    font-size:9pt;
    border-left:6px solid #7b7b7b;
    color:#7c7c7c;
    }
    li a {
    text-decoration: none;
    color: inherit;
    }
    .title {
    margin:0px;
    }
    .navigation ul {
    padding:0px;
    margin:0px;
    }
    .logo {
    margin-bottom: 10px;
    padding-left: 10px;
    }
    .sidebar {
    width:177px;
    float:left;
    margin-right:10px;
    }
    .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    background-color: #515151;
    font-family: Century Gothic;
    list-style: none outside none;
    margin-bottom: 1px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-top: 5px;
    font-size:9pt;
    border-left:6px solid #FAB101;
    color:#fff;
    }
    .titlewrapper {
    background-color: #FEFEFE;
    border: 1px solid #B6CADC;
    color: #BFBFBF;
    font-size: 28pt;
    margin-bottom: 5px;
    padding: 5px  10px;
    width: 768px;
    }
    </style>
    <div id="fb-root"></div>
    <script type="text/javascript">
            window.fbAsyncInit = function(){
                FB.init({appId: 'APPID', status: true, cookie: true, xfbml: true});
                FB.Canvas.setSize();
            };
            (function() {
                var e = document.createElement('script'); e.async = true;
                e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';  // all.js
                document.getElementById('fb-root').appendChild(e);
                setTimeout(sizeChangeCallback,5000);
            }());

            // Do things that will sometimes call sizeChangeCallback()

            function sizeChangeCallback() {
              FB.Canvas.setSize();
            }
    </script>
    </head>

    <body style="background-color:#e4e4e4;">
    <div class="clearfix" style="width:1007px;margin:auto;">
        <div id="tabs">
            <div class="sidebar">
                <div class="logo">
                    <img src="../images/gotodo_direct_logo.png">
                </div>

                <div class="navigation">
                     <ul class="nav">
                        <li id="tabs"><a href="app_page.php"><h3 class="title">Hotel Demo</h3><i>Indvidual hotel booking</i></a></li>
                        <li id="tabs"><a href="hotel.php"><h3 class="title">All Hotel List Demo</h3><i>all occupancy plus hotel partner</i></a></li>
                        <li id="tabs"><a href="hotel.php"><h3 class="title">Instruction</h3><i>how to install this app?</i></a></li>
                        <li id="tabs"><a href="hotel.php"><h3 class="title">Faq</h3> <i>frequently ask question</i></a></li>
                    </ul>
                </div>
            </div>
            <div class="main-content" style="float:left;width:790px;height:1000px;">
                    <div id="tabs-1">
                        <div class="titlewrapper" style="float:left;"><div style="float:left"><img src="images/hotel.png" style="margin-right: 10px; vertical-align: middle;"></div><div style="float:left;width:700px;">Hotel Demo<br /><i style="font-size:10pt;">let's take a look a quick demo at how hotel app look like when you install it on your facebook fan page</i></div></div>
                        <div class="rooms" style="float:left;">
                        <?php include'../hotel.php';?>
                        </div>
                    </div>
            </div>
        </div>
    </div>
    </body>

并且是我的应用的link

0 个答案:

没有答案