Подтвердить что ты не робот

Как удалить полосы прокрутки из приложения iFrame от Facebook

Я создал приложение iframe для facebook и установил размеры для параметра "Автоматическое изменение размера" на странице настроек приложения Facebook, но в нижней части экрана IE и Google Chrome показана горизонтальная полоса прокрутки. Прекрасно работает в Firefox. Любое решение?

4b9b3361

ОТВЕТЫ

Ответ 1

Объяснил, как это сделать здесь: http://clockworkcoder.blogspot.com/2011/02/how-to-removing-facebook-application-i.html В основном вы должны использовать

window.fbAsyncInit = function() {
    FB.Canvas.setAutoGrow();
};

плюс убедитесь, что ваши теги html и body установлены в overflow:hidden, поэтому вы не получите те кратковременно показанные полосы прокрутки, которые так раздражают

<html xmlns="http://www.w3.org/1999/xhtml" style="overflow: hidden">
    <head>
  <!-- Header stuff -->
 </head>
 <body style="overflow: hidden">

Ответ 2

Вам также нужно запустить таймер для вызова кода автосохранения. В ваших приложениях HTML:

window.fbAsyncInit = function() {
    FB.Canvas.setAutoResize();
};

Выше кода проверяет размеры содержимого каждые 100 мс. Если вы хотите использовать разное время, вы можете передавать миллисекунды в качестве переменной:

window.fbAsyncInit = function() {
    FB.Canvas.setAutoResize(50);
};

Если размер вашего контента не изменяется после загрузки страницы, вы можете сохранить циклы процессора, изменив размер содержимого только один раз вручную:

window.fbAsyncInit = function() {
    FB.Canvas.setSize();
}

Вы даже можете передать желаемый размер в качестве параметра

window.fbAsyncInit = function() {
    FB.Canvas.setSize({ width: 520, height: 600 });
}

Ответ 3

Facebook должен удалить атрибут SCROLLING = "YES" iframe приложения canvas и добавить переполнение: атрибут auto to style ИЛИ предоставим нам функцию, с помощью которой мы можем изменить значение атрибута прокрутки до НЕТ в соответствии с нашими приложениями.

Ответ 4

Я пробовал все, что вы сказали, и посмотрел на эти две ссылки (CSS + FireFox: скрытие полосы прокрутки на iframe с прокруткой = да - высота холста facebook без прокрутки в ie8 и firefox), которые обсуждают ту же проблему, но это не сработало для меня.

Что сработало для меня, это изменение настроек холста в разделе расширенной конфигурации холста app (https://developers.facebook.com/apps) до фиксированной ширины холста ( 760px) и высотой (зафиксировано на 800).

Надеюсь, это поможет вам.

Ответ 5

Может показаться очевидным, но вы пробовали CSS overflow: hidden на iFrame?

Ответ 6

У меня была эта проблема в прошлом. Хотя изменение размера может работать, на холсте Facebook есть максимальная ширина. Вполне вероятно, что ваш элемент тела имеет какой-то по умолчанию отступ/край, и поэтому он больше, чем максимальная ширина.

Попробуйте использовать таблицу стилей reset, которая очищает стили по умолчанию: http://developer.yahoo.com/yui/3/cssreset/

Ответ 7

Хорошо, я поделюсь некоторыми методами, собранными из нескольких ресурсов, которые могут быть реализованы, чтобы избавиться от нежелательных полос прокрутки вашего приложения iframe facebook. Итак, вот первый метод:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<script type="text/javascript">
function framesetsize(w,h){
var obj =   new Object;
obj.width=w;
obj.height=h;
FB.Canvas.setSize(obj);
}
</script>
</head>
<body onload="framesetsize(500,3300)"> <!--specify the height and width for resize-->
<div id="fb-root"></div> <!--this div is required by the Javascript SDK-->
<div style="height: 2400px">
//Your content
//Goes here
</div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
</body>
</html>

Использование последнего Javascript Facebook SDK [Без использования Body OnLoad]

window.fbAsyncInit = function() {
FB.init({
appId  : '142388952486760',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml  : true // parse XFBML
});
FB.Canvas.setAutoResize(); //set size according to iframe content size
};

(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());

Использование старого SDK для Javascript для Facebook

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(
["CanvasUtil"],
function(){
FB.XdComm.Server.init('/xd_receiver.html');
FB.CanvasClient.startTimerToSizeToContent();
}
);
</script>

<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function(){ FB.Facebook.init("Your Facebook API Key", "/xd_receiver.html"); });
</script>

Ответ 8

Горизонтальные полосы прокрутки всегда вызваны шириной вашей HTML-страницы, большей, чем площадь iframe.

Убедитесь, что вы установили правильную ширину в свой или содержащий.

Задайте ширину в вашем файле CSS и установите свойство переполнения.

Если это приложение Tab iframe, вы можете установить его так:

body{
  width:510px;
  overflow:hidden;
}

Ответ 9

Будучи разочарованным в этой проблеме Firefox в течение долгого времени, наконец нашел лучшее решение, которое находится здесь от Roses Mark. Она предложила несколько способов, однако только тело onload стабильно удаляет полосу прокрутки в Firefox 10.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
        <script type="text/javascript">
            function framesetsize(w,h){
                var obj = new Object;
                obj.width=w;
                obj.height=h;
                FB.Canvas.setSize(obj);
            }
        </script>
    </head>
    <body onload="framesetsize(500,3300)"> <!--specify the height and width for resize-->
        <div id="fb-root"></div> <!--this div is required by the Javascript SDK-->
        <div style="height: 2400px">
            //Your content
            //Goes here
        </div>
        <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
    </body>
</html>

Ответ 10

Помимо этого кода:

window.fbAsyncInit = function() {
    FB.Canvas.setAutoResize();
};

Также обновите настройку высоты холста в настройках приложения для разработчиков FB:

Установите высоту холста в значение Фиксированный, а не Fluid. Это приведет к удалению горизонтальных и вертикальных полос прокрутки.

Ответ 11

Я пробовал много вещей, перечисленных здесь, но что действительно работало:

  • Конфигурации → Дополнительно → Настройки холста, установите фиксированную ширину и высоту

Также важно заметить, что если вы не указали URL-адрес политики конфиденциальности, facebook не сохранит эту конфигурацию.

Ответ 12

Я нашел идеальное решение! Обязательно поместите следующий код CSS в область <head>:

<style>*{margin:0;padding:0;}</style>

Полосы прокрутки показаны на самом деле, потому что имеется заданное значение по умолчанию или по умолчанию. Надеюсь, что смогу помочь!