Как изменить следующую функцию jQuery для определения высоты iframe? - PullRequest
Новая
       10

Как изменить следующую функцию jQuery для определения высоты iframe?

0 голосов
/ 05 ноября 2011

Я использую плагин комментирования на моем сайте. Это скрыто в div. 

<div style="display: none" id=cmbx(id) class="comentBox">

  <div class="fb-comments" data-href="mywebsite.com(id)" data-num-posts="5" data-width="520"></div>  

</div>

Это Facebook комментирует javascrip часть 

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=143512332326919";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Существует функция jquery, которая показывает скрытый .comentBox div, она запускается при нажатии на следующую ссылку 

<a class="st_commentsa" href="#" onClick="return false" onMousedown="javascript:toggleSlideBox(\'cmbx(id)\');">Comments</a>

и вот функция jQuery 

function toggleSlideBox(x) {
    if ($('#' + x).is(":hidden")) {
        $(".comentBox").slideUp(200);
        $('#' + x).slideDown(200)
    } else {
        $('#' + x).slideUp(200)
    }
}

Проблема заключается в следующем. Как только скрытое разделение получено, в комментариях на Facebook появляется много места, которого там быть не должно, я думаю, это вызвано тем, что функция jquery не знает высоту iframe в facebook. Не могли бы вы предложить какие-либо решения / модификации, которые могут решить эту проблему?

Вы можете сами увидеть проблему здесь: http://inelmo.com/inelmo (нажмите на несколько ссылок комментариев под сообщениями, чтобы противостоять скрытым элементам div.)

ПРИМЕЧАНИЕ: Я тестировал его в нескольких браузерах, FireFox работает нормально, проблемы присутствуют в chrome, safari и IE, не уверен насчет оперы.

1 Ответ

2 голосов
/ 05 ноября 2011

Это может быть немного глупо, но это должно сработать. (Невозможно проверить).

Проблема, похоже, заключается в том, что ваш iframe решает, что его высота примерно на 400 пикселей больше, чем по какой-либо причине. Это может быть проблема с Facebook.

Что вы можете сделать, это вручную установить высоту iframe на «auto» при загрузке страницы. 

$(document).ready(function() {
   $(".fb-comments iframe").css("height", "auto");
});

Я не могу проверить это, но у меня есть подтверждение концепции редактирования DOM в Chrome.

--- отредактированный код ниже --- 

$(".fb-comments iframe").css("height", function() {
    $(this).contents().find("body").height();
});

Надеюсь, это решит проблему, установив высоту iframe на высоту его содержимого. Опять же, не уверен, как это получится с вышеизложенным. Свойство auto, по-видимому, не расширяет iframe, чтобы соответствовать его содержимому, как это делает обычный html-элемент. Сохраните код в событии «Комментарий».

Я думаю, что это может вызвать другую проблему, когда при изменении содержимого iframe (поскольку они связаны с тем, когда кто-то добавляет комментарий), iframe не расширяется. Итак, мы сейчас находимся на этапе, когда вам нужно постоянно отслеживать содержимое iframe и применять его к самому iframe, что кажется слишком сложным, но я не могу придумать более простой способ.

Я сделал быстрый поиск, чтобы выяснить, есть ли у кого-нибудь более умный метод расширения фрейма, чтобы он соответствовал его содержимому, и не мог его увидеть. Но, похоже, именно в этом заключается ваш настоящий вопрос, когда мы его изучили.

...