¿Cómo funciona el DiggBar cambiar el tamaño dinámicamente la altura de su marco flotante basado en el contenido, no en su dominio?

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

  •  09-09-2019
  •  | 
  •  

Pregunta

Alguien ya ha pedido, ¿Cómo funciona el DiggBar? en una pregunta anterior .

Mientras que alguien proporciona una respuesta decente que no se refirió a una cosa:

  

Digg ¿Cómo cambiar dinámicamente el tamaño de su   la altura del iframe, basado en el contenido   de un sitio a través de un dominio diferente?

Hay un montón de preguntas y respuestas aquí en la SO para ajustar dinámicamente una altura iframes con sede fuera de contenidos (usando javascript) , siempre y cuando la url enmarcado es en su propio dominio. Sin embargo, Digg parece han resuelto este problema con los sitios web de cualquier dominio.

¿Alguno de los programadores SO web tienen alguna idea de lo que lograron eso?

Nota: El marco flotante no es simplemente ajustado a la altura del 100%. La etiqueta iframe simplemente no funciona de esa manera. Google "100% iframe altura" y verá lo que quiero decir.

¿Fue útil?

Solución

Si nos fijamos en su CSS , utilizan height: 100% para la iframe: 

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

Se posicionan la DiggBar anteriormente que con una altura de 46px, por lo que el iframe toma 100% del espacio restante. Utilizan overflow: hidden en el elemento body para mantener el iframe por completo dentro de la altura vertical de la página, en lugar de permitir la página para desplazarse. Esto significa que la barra de desplazamiento aparecerá entonces en el interior del iframe, en lugar de para toda la página. Tenga en cuenta que el camino del DiggBar lo hace sólo funciona en el modo de peculiaridades en Firefox; ver más abajo para la forma de hacerlo en modo estándar. 

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

editar : Para los que no me creen, aquí hay una pequeño ejemplo . Para conseguir que se llene todo el espacio, es necesario configurarlo para que tenga ninguna frontera, y que necesita <body> no tener márgenes.

editar 2 : Ah, lo siento, veo lo que estaba hablando. Es necesario el overflow: hidden en la etiqueta body para obtener la barra de desplazamiento para trabajar de la manera deseada.

editar 3 : Parece que usted tiene que estar en modo de caprichos para que esto funcione en Firefox; si se incluye una declaración <!DOCTYPE html>, que se pone en modo estándar, y su iframe sale demasiado pequeño.

editar 4 : Ah, lo puede hacer en el modo de estándares en Firefox también. Tiene la respuesta aquí . Es necesario ajustar la altura de sus elementos <html> y <body> a 100% también. (Tenga en cuenta que el <!DOCTYPE html> es el tipo de documento para HTML 5 , que es un trabajo en progreso; Sin embargo, funciona en todos los navegadores modernos para encender el modo estándar). 

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

Otros consejos

Parte del problema con HTML no se puede simplemente fijar un elemento de cualquier cosa a la altura del 100% y tienen que ocupa todo el espacio de la ventana. Una forma de hacerlo es haciendo que el cuerpo tiene una altura en píxeles de la ventana y cualquier cosa dentro del cuerpo se ajusta al 100% será el tamaño de la ventana.

Básicamente, sólo hacer un JavaScript que ata en caso de que las ventanas onResize y tienen que cambiar el tamaño del cuerpo para que el tamaño de la ventana.

A continuación se muestra un ejemplo que hice usando jQuery 

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

Con esto, usted será capaz de establecer un div o otros elementos para que funcionen en toda la altura de la ventana.

Un iframe puede tener altura 100% en el modo peculiaridades. Digg logra esto dejando de lado el tipo de documento.

El marco flotante se encuentra en el sitio web de Digg con el sitio web de destino en el interior, no al revés. El marco flotante se establece en anchura y la altura 100%.

100% en un iframe es un porcentaje del 100% del espacio de los padres declarado. Un ejemplo es: 

/* 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 */
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top