Dlaczego element iFrame "Facebook Comments" ma inną wysokość, gdy jest załadowany do kontenera z wyświetlaniem CSS: none '?

Piszę aplikację internetową, która ładuje stronę, a następnie wykorzystuje javascript do wyświetlania pola komentarzy z Facebooka za pomocą kodu XFBML na Facebooku. Mam Facebook Comments ifame w kontenerze, który jest ustawiony na "display: none" podczas ładowania strony. Później, gdy użytkownik kliknie przycisk, wyświetlany jest kontener.Dlaczego element iFrame "Facebook Comments" ma inną wysokość, gdy jest załadowany do kontenera z wyświetlaniem CSS: none '?

Problem, który napotkałem, gdy strona ładuje się z kontenerem komentarzy Facebooka ustawionym na "display: none", element iframe, który ładuje Facebook, ma wysokość znacznie większą niż oczekiwana. Jeśli jednak załaduję stronę z kontenerem komentarzy na Facebooku ustawioną na "display: block", a następnie ustawię ją na "display: none" po załadowaniu strony, element iframe otrzyma atrybut odpowiedniej wysokości. Ciekawi mnie, co powoduje tę rozbieżność w ustawianiu wysokości elementu iframe.

Moje obejście polega na załadowaniu strony z ustawionym stylem kontenera na "display: block; wysokość: 1 piksel; szerokość: 1 piksel; border: none ', a następnie użyj javascript po wczytaniu strony, aby ustawić kontener na "display: none". Jestem tylko ciekawy, co powoduje to i czy jest lepsze obejście niż to, co robię.

Czy ktoś może wyjaśnić to zjawisko i powiedzieć, jakie jest proponowane rozwiązanie?

Poniżej znajduje się uproszczona wersja moich znaczników bez obejścia. Jeśli załadujesz to w przeglądarce i klikniesz przycisk "Pokaż komentarze", zobaczysz duży szary obszar, który jest kontenerem komentarzy na Facebooku i jest znacznie większy niż rzeczywiste pole komentarzy.

<!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>

Źródło

2011-06-28 TJ_Fischer

nie mogę być pewien, ale chyba display: none; funkcje ignorując height: attribute-- choć mogłeś ustawić wysokość, display: none; przesłonięcia go (podobnie jak display: inline; do pewnej wysokości zadajnikami).

polecam o CSS display: none; jako awaryjne dla użytkowników, którzy nie mają JS,

#facebook-comments { display: none; }

następnie przesłanianie do display: block; z JS

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

    function showComments(e){ 
     ... 
    } 
</script>

przed załadowaniem komentarze Facebook. Po załadowaniu iframe, tuż przed </body>, po prostu ukryć div ponownie:

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

może nie najprostszy sposób, ale to powinno działać.

Pozdrawiam!

Źródło

2011-07-06 19:58:24 citelao

Dlaczego element iFrame "Facebook Comments" ma inną wysokość, gdy jest załadowany do kontenera z wyświetlaniem CSS: none '?

Odpowiedz

Powiązane problemy