Почему iFrame «Комментариев Facebook» имеет другую высоту, когда он загружается в контейнер с CSS «display: none»? - PullRequest
Новая
       5

Почему iFrame «Комментариев Facebook» имеет другую высоту, когда он загружается в контейнер с CSS «display: none»?

6 голосов
/ 28 июня 2011

Я пишу веб-приложение, которое загружает страницу, а затем использует javascript для отображения окна комментариев Facebook, используя код XFBML Facebook.У меня есть iframe Комментариев Facebook в контейнере, который установлен на «display: none» при загрузке страницы.Позже, когда пользователь нажимает на кнопку, отображается контейнер.

Проблема, с которой я столкнулся, заключается в том, что при загрузке страницы с контейнером комментариев Facebook, установленным на «display: none», в фрейме, загружаемом Facebook, естьвысота намного больше, чем ожидается.Однако, если я загружаю страницу с контейнером Комментариев Facebook, установленным на «display: block», а затем устанавливаю его на «display: none» после загрузки страницы, iframe получает правильный атрибут высоты.Мне любопытно, что вызывает это несоответствие в настройке высоты iframe.

Мой обходной путь - загрузить страницу со стилем контейнера, установленным в 'display: block;высота: 1 пикс;ширина: 1px;border: none ', а затем используйте javascript после загрузки страницы, чтобы установить контейнер' display: none '.Мне просто любопытно, что является причиной этого, и есть ли лучший обходной путь, чем то, что я делаю.

Кто-нибудь может объяснить это явление и сказать мне, что является предлагаемым решением?

ДляВаша ссылка ниже - это упрощенная версия моей разметки без обходного пути.Если вы загрузите его в браузер и нажмете кнопку «Показать комментарии», вы увидите большую серую область, которая является контейнером комментариев Facebook и намного больше, чем поле для комментариев. 

<!DOCTYPE html>
<html>
    <head>
        <title>Facebook Commments Page</title>
        <style type="text/css">
            .initial-content { width: 100%; overflow: hidden; }
            .show-comments-button { float: left; background: #aaa; padding: 6px;}
            #facebook-comments { display: none; background: #eeeeee; }
        </style>
        <script>
            function showComments(e){
                var commentContainer = document.getElementById('facebook-comments');
                commentContainer.style['display'] = 'block';
            }
        </script>
    </head>
    <body>
        <div class="initial-content">
            <h1>My little web app</h1>
            <p>Here is the content a user sees when first loading the page.</p>
            <div class="show-comments-button" onclick="showComments(event);">Show Comments</div>
        </div>
        <div id="facebook-comments">
            <h1>Facebook Comments</h1>
            <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="example.com" num_posts="2" width="500"></fb:comments>
        </div>
    </body>
</html>

1 Ответ

1 голос
/ 06 июля 2011

Я не могу быть уверен, но, возможно, display: none; функционирует, игнорируя атрибут height: - даже если вы установили высоту, display: none; переопределяет ее (так же, как display: inline; для определенной высоты переопределений).

Я рекомендую использовать CSS display: none; в качестве запасного варианта для пользователей, у которых нет JS, 

#facebook-comments { display: none; }

, а затем переопределить на display: block; с помощью JS

* 1013.*

перед загрузкой ваших комментариев в Facebook.После загрузки iframe, перед </body>, просто снова спрячьте div: 

<script>
    var commentContainer = document.getElementById('facebook-comments');
    commentContainer.style['display'] = 'none';
</script>

Возможно, это не самый простой способ, но он должен работать.

Cheers!

...