¿Cómo cambia DiggBar de forma dinámica el tamaño de su iframe en función del contenido que no está en su dominio?

Alguien ya ha pedido, How does the DiggBar work? en una pregunta anterior.¿Cómo cambia DiggBar de forma dinámica el tamaño de su iframe en función del contenido que no está en su dominio?

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

Digg ¿Cómo cambiar dinámicamente el tamaño de su 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 es enmarcado en su propio dominio. Sin embargo, Digg parece haber resuelto este problema con sitios web de cualquier dominio.

¿Algún programador de SO tiene alguna idea de cómo lo lograron?

Nota: El iframe NO se configura simplemente al 100% de altura. La etiqueta iframe simplemente no funciona así. Google "iframe al 100% de altura" y verás lo que quiero decir.

Fuente

2009-04-16 Mithrax

Si nos fijamos en their 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 por encima de la DiggBar que con una altura de 46px, por lo que la toma iframe 100% del espacio restante. Utilizan overflow: hidden en el elemento body para mantener el iframe completamente dentro de la altura vertical de la página, en lugar de permitir que la página se desplace. Esto significa que la barra de desplazamiento aparecerá dentro del iframe, en lugar de para toda la página. Tenga en cuenta que la forma en que funciona DiggBar funciona solo en modo peculiar en Firefox; ver a continuación cómo 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; 
}

edición: Para los que no me creen, aquí hay una small example. Para que ocupe todo el espacio, debe configurarlo para que no tenga borde, y necesita <body> para no tener márgenes.

editar 2: Ah, lo siento, veo de lo que estabas hablando. Necesita el overflow: hidden en la etiqueta body para que la barra de desplazamiento funcione de la manera que desee.

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

edit 4: Ah, puede hacerlo en modo estándar en Firefox también. Obtuve la respuesta here. Debe configurar la altura en sus elementos <html> y <body> en 100% también.(Tenga en cuenta que el <!DOCTYPE html> es el doctype para HTML 5, que es un trabajo en progreso; sin embargo, funciona en todos los navegadores modernos para activar 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>

Fuente

2009-04-16 02:45:07

iframes no funcionan. Inténtalo tú mismo, establece un iframe con alto: 100% y configura su src en http://gooogle.com. No funcionará – KingNestor

La mayoría de las personas terminan recurriendo a javascript para hacer esto, pero falla al intentar hacerlo para un iframe con un src configurado en un sitio a través de un dominio diferente. Tengo curiosidad de cómo hacen esto también. – KingNestor

altura 100% lo expandirá a la altura de la etiqueta del cuerpo, que no es la altura del contenido de iframed y en la mayoría de los casos será demasiado pequeño. – KingNestor

El iFrame está en el sitio web de Digg con el sitio web de destino en el interior, y no al revés. El iFrame está configurado a 100% de ancho y alto.

Fuente

2009-04-16 02:29:16

Sí, sé esto. Pero el src al que apunta el iframe apunta a una URL fuera de su dominio. Por lo tanto, debido a la seguridad, no deberían poder cambiar el tamaño dinámicamente en función de la altura del contenido. – Mithrax

iframes de altura del 100% no funcionan así. Buscalo en Google. – Mithrax

Parte del problema con HTML que simplemente no puede 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 tenga una altura de píxel de la ventana y cualquier cosa dentro del cuerpo configurada al 100% será del tamaño de la ventana.

Básicamente solo haga un JavaScript que vincule con el evento onresize de windows y haga que cambie el tamaño del cuerpo al tamaño de la ventana.

aquí es 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.

Fuente

2009-04-16 02:55:22 Superdumbell

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

Fuente

2009-12-02 01:36:50

100% en un iframe es un 100% por ciento del espacio padre 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 */

Fuente

2014-03-14 23:20:56

¿Cómo cambia DiggBar de forma dinámica el tamaño de su iframe en función del contenido que no está en su dominio?

Respuesta

Cuestiones relacionadas