Comment le DiggBar redimensionne dynamiquement la hauteur de son iframe en fonction du contenu non sur leur domaine?

StackOverflow https://stackoverflow.com/questions/754519

  •  09-09-2019
  •  | 
  •  

Question

Quelqu'un a déjà demandé, Comment fonctionne le DiggBar dans une question précédente .

Alors que quelqu'un a fourni une réponse décente, il n'a pas abordé une chose:

  

Comment Digg redimensionne dynamiquement leur   la hauteur de iframe, en fonction du contenu   d'un site dans un autre domaine?

Il y a beaucoup de questions et réponses ici sur le SO pour ajuster dynamiquement une hauteur de iframes à base de contenu (en utilisant javascript) tant que l'url encadrée est sur votre propre domaine. Cependant, Digg semble ont résolu ce problème avec les sites Web de tous les domaines.

Faites des programmeurs web SO ont une idée qu'ils ont accompli cela?

Note: Le iframe n'est pas simplement réglé sur une hauteur de 100%. La balise iframe ne fonctionne tout simplement pas comme ça. Google "hauteur 100% iframe" et vous verrez ce que je veux dire.

Était-ce utile?

La solution

Si vous regardez leur CSS , ils utilisent height: 100% pour le iframe: 

iframe#diggiFrame {
    color: #666;
    width: 100%;
    height: 100%;
    z-index: 10;
    -webkit-box-sizing: border-box;    
}

Ils positionnent le DiggBar ci-dessus que d'une hauteur de 46px, de sorte que le iframe prend 100% de l'espace restant. Ils utilisent overflow: hidden sur l'élément body pour maintenir la iframe entièrement dans la hauteur verticale de la page, plutôt que de laisser la page pour faire défiler. Cela signifie que la barre de défilement apparaît alors à l'intérieur du iframe, au lieu de la page entière. Notez que la la façon dont le DiggBar ne il ne fonctionne que dans le mode de bizarreries dans Firefox; voir ci-dessous pour savoir comment faire en mode standard. 

body {
    padding: 46px 0 0 0;
    margin: 0;
    background: #fff;
    overflow: hidden; 
    color: #333;
    text-align: left;
}

#t {
    width: 100%;
    min-width: 950px;
    height: 46px;
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    /* overflow: hidden; */
    border-bottom: 1px solid #666;
    background: #fff url(/App_PermaFrame/media/img/back.gif) repeat-x;
    line-height: 1;
}

modifier : Pour ceux qui ne me croient pas, voici une ici . Vous devez définir la hauteur de vos éléments <html> et <body> à 100% ainsi. (Notez que le <!DOCTYPE html> est le doctype HTML 5 , qui est un travail en cours; cependant, il fonctionne sur tous les navigateurs modernes pour activer le mode standard). 

<!DOCTYPE html>
<html>
<head>
  <style type="text/css" media="all">
    html, body {
      height: 100%
    }
    body {
      margin: 0;
      overflow: hidden;
    }
    #topbar {
      height: 50px;
      width: 100%;
      border-bottom: 1px solid #666
    }
    #iframe {
      height: 100%;
      width: 100%;
      border-width: 0
    }
  </style>
</head>
<body>
  <div id="topbar">
    <h1>This is my fake DiggBar</h1>
  </div>
  <iframe id="iframe" src="http://www.google.com/"></iframe>
</body>

Autres conseils

Une partie du problème avec le langage HTML vous ne pouvez pas simplement mettre un élément de quelque chose à la hauteur de 100% et ont-il en tout l'espace de la fenêtre. Une façon de le faire est en faisant le corps ont une hauteur de pixel de la fenêtre et toute chose à l'intérieur du corps fixé à 100% sera la taille de la fenêtre.

En gros, juste faire un JavaScript qui lie l'événement sur des fenêtres et l'ont redimensionne le corps à la taille de la fenêtre.

voici un exemple que j'ai fait en utilisant jQuery 

<script language="JavaScript" type="text/JavaScript">
    $(window).resize(function() {
        $('body').height(document.documentElement.clientHeight);
    });
</script>

Avec cela, vous serez en mesure de définir un div ou autre éléments et le faire fonctionner à la pleine hauteur de la fenêtre.

Un iframe peut avoir une hauteur de 100% en mode quirks. Digg parvient en laissant le doctype.

Le iFrame est sur le site Digg avec le site cible à l'intérieur, et non l'inverse. Le iFrame est réglé sur une largeur de 100% et la hauteur.

100% dans une iframe est un pour cent à 100% de l'espace parent déclarée. Un exemple est: 

/* parent element */

html, body {
   width: 100%;
   height: 100%;
}

/* child element */
iframe {
  width: 100%; /* this is truly 100%, try it out */
  height: 100%; /* try it out */
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top