Изменение размера приложения iframe, чтобы избавиться от всех полос прокрутки в firefox

Я создал приложение, которое будет вкладкой страницы FB. Теперь я пытаюсь избавиться от полос прокрутки, которые появляются, когда содержание превышает 800 пикселей. Для этого я использовал следующий код:Изменение размера приложения iframe, чтобы избавиться от всех полос прокрутки в firefox

<div id="fb-root"></div> 
<script src="http://connect.facebook.net/en_US/all.js"></script> 
<script> 
    FB.init({ 
     appId : '<?php echo $app_id; ?>', 
     status : true, // check login status 
     cookie : true, // enable cookies to allow the server to access the session 
     xfbml : true // parse XFBML 
    }); 
</script> 
<script type="text/javascript"> 
    window.fbAsyncInit = function() { 
     FB.Canvas.setAutoGrow(); 
    } 
    // Do things that will sometimes call sizeChangeCallback() 
    function sizeChangeCallback() { 
     FB.Canvas.setSize(); 
    } 
</script>

Теперь это отлично подходит для Google Chrome, но показывает полосы прокрутки для firefox. Фактически, изначально не было горизонтальной полосы прокрутки, которая теперь появилась. В каком-то блоге было написано, что, чтобы избавиться от этой ошибки, мы должны перекрыть переполнение в скрытое. Я тоже пытался это сделать, но это сокращение содержимого. Каково решение этого? Это мой CSS для html и body:

html { 
    border: 1px solid #cccccc; 
    min-height: 798px; 
    font-size: 12px; 
    overflow: hidden; 
} 
body { 
    width: 495px; 
    overflow: hidden; 
font-size: 12px; 
background-color: #f7f7f7; 
color: #444444; 
font-family: lucida grande, tahoma, verdana, arial, sans-serif; 
}

источник

2012-01-02 akshay3004

У меня была такая же проблема, когда firefox добавлял полосы прокрутки на мою страницу/вкладку на facebook. Исправления в конце концов, было ...

В заходящем убедитесь, что у вас есть «вкладка страницы» и «приложение на Facebook» Настройку с помощью вкладки страницы/холста URL и безопасной версии приложения.
Код:

<div id="fb-root"></div> 
<script> 
    window.fbAsyncInit = function() { 
    FB.init({ 
     appId  : 'FB_APP_ID', // App ID 
     channelUrl : 'FB_CHANNEL_URL', // Channel File 
     status  : true, // check login status 
     cookie  : true, // enable cookies to allow the server to access the session 
     xfbml  : true // parse XFBML 
    }); 

    // Additional initialization code here 
    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>

Успехов!

источник

2012-02-14 12:22:43 Gareth

это отлично сработало для меня, не нужно channelUrl, хотя - никогда даже не слышал об этом раньше! – martincarlin87

channelUrl является необязательным, но подходит для решения определенных проблем, таких как межсерверная связь. Я не использую его, если он мне не нужен. –

Для меня это часто помогало скрыть только переполнение-x. Это не должно прерывать контент, помогая при этом некоторым причудам в расчетах размера Firefox.

EDIT: Проблема с исполнением. Сначала выполняется Facebook-SDK. Он проверяет наличие window.fbAsyncInit - который не определен в этой точке. Позже fbAsyncInit определен, но Facebook никогда не проверяет снова, поэтому функция не выполняется никогда. Поэтому setAutoGrow не выполняется, и вся магия не происходит. Перемещение определения fbAsyncInit в некоторый момент до включения FB SDK должно решить проблему.

источник

2012-01-02 08:46:47

с переполнением-x: скрытая горизонтальная полоса прокрутки исчезает, но вертикальная полоса прокрутки все еще остается. Как избавиться от него? – akshay3004

, если вертикальная полоса прокрутки не исчезает - вы уверены, что setAutoGrow работает правильно? Это трудно отлаживать без доступа к интерфейсу (Javascript error-console и т. Д.). Вы пробовали сузить его? Например, создайте тестовую страницу, где тело содержит только div с высотой: 900 пикселей и т. Д.? –

кажется, что эта функция AutoGrow не работает ... я пытался увеличить hieght ... размер холста остается тем же ... дополнительный контент доступен только через полосы прокрутки – akshay3004

сделать одну функцию следующим образом:

function grow() 
    { 

    FB.Canvas.setAutoGrow(); 

    }

эту функцию на событие OnLoad тела в <body onLoad="grow()">

вызовов Надеюсь, что это работает, ура.

источник

2012-01-02 13:46:19

Я столкнулся с этой проблемой, а после нескольких часов чтения сообщений в сети я наконец нашел решение, которое работает. При условии, что вы включили этот DIV в разметке:

<div id="fb-root"></div>

Просто добавьте этот скрипт в конец файла (перед закрытием тега тела):

window.fbAsyncInit = function() { 
    FB.init({ 
     appId:'APP ID', 
     status:true, 
     cookie:true, 
     xfbml:true 
    }); 
FB.Canvas.setAutoGrow(); 
}; 

(function (d, debug) { 
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; 
    if (d.getElementById(id)) { 
     return; 
    } 
    js = d.createElement('script'); 
    js.id = id; 
    js.async = true; 
    js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js"; 
    ref.parentNode.insertBefore(js, ref); 
}(document, /*debug*/ false));

Мой вопрос заключается в том, что depite работает над Chrome , Safari и даже IE, он по-прежнему не работает в Firefox и Opera. Проблема заключалась в том, что приведенный выше код был написан внутри функции $ (document) .ready(), поэтому Firefox и Opera никогда не запускали функцию fbAsyncInit.После перемещения кода снаружи, независимо от других функций, все работает отлично.

источник

2013-03-26 11:00:03

Изменение размера приложения iframe, чтобы избавиться от всех полос прокрутки в firefox

ответ

Смежные вопросы