Come funziona il DiggBar ridimensionare dinamicamente l'altezza del suo iframe in base al contenuto, non sulla loro dominio?

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

  •  09-09-2019
  •  | 
  •  

Domanda

Qualcuno ha già chiesto, Come funziona il DiggBar? in una domanda precedente .

Mentre qualcuno ha fornito una risposta decente che non ha affrontato una cosa:

  

In che modo Digg ridimensionare dinamicamente la loro   l'altezza di iframe, in base al contenuto   di un sito in un dominio diverso?

Ci sono un sacco di domande e risposte qui su SO per regolare dinamicamente un altezza iframe in base al largo di contenuti (utilizzando JavaScript) finché l'url incorniciata è sul tuo dominio. Tuttavia, Digg sembra hanno risolto questo problema con i siti web di qualsiasi dominio.

fare qualsiasi programmatori SO web hanno alcuna idea di come hanno compiuto questo?

Nota: L'iframe non è semplicemente impostato altezza 100%. Il tag iframe semplicemente non funziona così. Google "100% altezza iframe" e vedrete cosa intendo.

È stato utile?

Soluzione

Se si guarda a loro CSS , usano height: 100% per il iframe: 

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

Si posizionano la DiggBar sopra che con un'altezza di 46px, quindi il iframe prende il 100% dello spazio rimanente. Usano overflow: hidden sull'elemento body per mantenere il iframe interamente all'interno l'altezza verticale della pagina, piuttosto che permettere la pagina da scorrere. Ciò significa che la barra di scorrimento apparirà all'interno della iframe, anziché per l'intera pagina. Si noti che il modo in cui il DiggBar lo fa funziona solo in quirks mode in Firefox; vedi sotto per come farlo in modalità 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;
}

modifica : Per coloro che non mi credete, ecco un piccolo esempio . Per farlo riempire l'intero spazio, è necessario impostare a non avere confini, ed è necessario <body> non avere margini.

modifica 2 : Ah, mi dispiace, capisco cosa stavi parlando. È necessario il overflow: hidden sul tag body per ottenere la barra di scorrimento a lavorare nel modo desiderato.

modifica 3 : Sembra che bisogna essere in quirks mode per questo al lavoro in Firefox; se si include una dichiarazione <!DOCTYPE html>, che si mette in modalità standard, e la vostra iframe esce troppo piccolo.

modifica 4 : Ah, lo si può fare in modalità standard in Firefox pure. Ha ottenuto la risposta qui . È necessario impostare l'altezza sulle <html> e <body> elementi per 100% pure. (Si noti che il <!DOCTYPE html> è il doctype per HTML 5 , che è un work in progress; tuttavia, funziona su tutti i browser moderni per accendere la modalità 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>

Altri suggerimenti

Parte del problema con il codice HTML non si può semplicemente impostare un elemento di qualsiasi cosa per altezza 100% e lo hanno occupano l'intero spazio della finestra. Un modo per farlo è quello di fare del corpo hanno un'altezza in pixel della finestra e qualsiasi cosa all'interno del corpo impostato al 100% sarà la dimensione della finestra.

In fondo basta fare un JavaScript che lega sulle finestre onResize evento e farlo ridimensionare il corpo alle dimensioni della finestra.

ecco un esempio che ho fatto utilizzando jQuery 

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

Con questo si sarà in grado di impostare un div o altri elementi e farlo lavorare a tutta l'altezza della finestra.

Un iframe può avere un'altezza di 100% in quirks mode. Digg raggiunge questo tralasciando il doctype.

L'iFrame è sul sito Digg con il sito bersaglio all'interno, non il contrario. L'iFrame è impostato per larghezza e altezza al 100%.

100% in un iframe è un per cento dello spazio genitore dichiarato 100%. Un esempio è il seguente: 

/* 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 */
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top