Wie funktioniert die Größe des DiggBar seine iframe der dynamisch Höhe basierend auf dem Inhalt nicht auf ihrer Domain?

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

  •  09-09-2019
  •  | 
  •  

Frage

Jemand schon gefragt hat, Wie funktioniert die DiggBar arbeiten? in einer früheren Frage .

Während jemand eine anständige Antwort vorausgesetzt, es ist nicht eine Sache hat Adresse:

  

Wie Digg dynamisch die Größe ihrer   iframe Höhe, basierend auf dem Inhalt   eine Website über einen anderen Domain?

Es gibt viele Fragen und Antworten hier auf SO für eine iframes Höhe dynamische Anpassung basiert off-Gehalt (mit Javascript) solange die gerahmte URL auf Ihrer eigenen Domain ist. Allerdings scheint Digg Um dieses Problem mit Websites von jeder Domain hat gelöst.

Stellen Sie keine SO Web-Programmierer haben keine Ahnung, wie sie das erreicht?

Hinweis: Die iframe ist nicht einfach auf 100% Höhe. Der iframe-Tag einfach nicht wie das funktioniert. Google "100% Höhe iframe" und Sie werden sehen, was ich meine.

War es hilfreich?

Lösung

Wenn man sich ihre CSS , die sie verwenden height: 100% für die iframe: 

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

Sie die DiggBar mit einer Höhe von 46px oberhalb dieser Position, so dass die iframe 100% des verbleibenden Platz in Anspruch nimmt. Sie verwenden overflow: hidden auf dem body Elemente innerhalb der vertikalen Höhe der Seite den iframe vollständig zu halten, statt zuzulassen, dass die Seite zu blättern. Dies bedeutet, dass die Bildlaufleiste wird dann innerhalb der iframe erscheinen, statt für die gesamte Seite. Beachten Sie, dass das die Art und Weise der DiggBar es nur im Quirks-Modus in Firefox funktioniert funktioniert; siehe unten, wie es im Standardmodus zu tun. 

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;
}

Bearbeiten : Für diejenigen, die mich nicht glauben, hier ist ein hier . Sie müssen die Höhe auf <html> und <body> Elemente setzen und 100%. (Beachten Sie, dass die <!DOCTYPE html> ist die doctype für HTML 5 , die eine unfertige ist; aber es funktioniert auf allen modernen Browsern für auf Standards-Modus drehen). 

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

Andere Tipps

Ein Teil des Problems mit HTML Sie können nicht nur ein Element einer jeden Sache auf 100% Höhe eingestellt und haben es das gesamte Fenster Platz. Eine Möglichkeit, dies zu tun ist, indem der Körper eine Pixelhöhe des Fensters hat und irgend etwas im Innern des Körpers auf 100% gesetzt wird die Größe des Fensters sein.

Im Grunde nur ein JavaScript machen, dass die Fenster onresize Ereignis bindet an und hat es den Körper auf die Größe des Fensters ändern.

Hier ist ein Beispiel, das ich jQuery gemacht mit 

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

Damit können Sie ein div oder eine andere Elemente setzen und haben es auf die volle Höhe des Fensters arbeiten.

Ein iframe kann Höhe 100% im Quirks-Modus. Digg erreicht dies durch den Doctype Weglassen.

Der iFrame auf der Digg-Website mit der Ziel-Website nach innen, nicht umgekehrt. Der iFrame ist auf 100% Breite und Höhe.

100% in einem Iframe ist ein 100% Prozent des Elternraum erklärt. Ein Beispiel ist: 

/* 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 */
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top