Tengo una página web con 2 iFrames. Ambos tienen ancho y alto fijos. Estoy cargando sitios web externos dentro de ellos. ¿Cómo puedo redimensionar el ancho de esos sitios web externos para adaptarlo al iFrame (al igual que los navegadores móviles al cambiar la ventana gráfica)?Cambiar el tamaño del contenido del sitio web externo para que se ajuste al ancho del iFrame
Lo que puede hacer es establecer el ancho y la altura específicos de su iframe (por ejemplo, estos podrían ser iguales a las dimensiones de su ventana) y luego aplicarle una transformación de escala. El valor de escala será la relación entre el ancho de su ventana y la dimensión que desea establecer en su iframe.
E.g.
<iframe width="1024" height="768" src="http://www.bbc.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>
+1, muy agradable, pero puede que no sea una solución de navegador cruzado! –
cierto, pero depende de su definición de solución entre navegadores. AFAIK debería funcionar en IE> 8 – Luca
Me funcionó a la perfección. Gracias ... :) –
Dentro de un IFrame, el navegador representa automáticamente la página web como si estuviera en una página separada, se comporta de la misma manera que si, por ejemplo, cambiara el tamaño del navegador ... la página web se mostrará tal como se diseñó ya sea un diseño fluido en dimensiones fijas o lo que sea ... no se puede forzar un comportamiento de representación diferente en el sitio. Sin embargo, podría modificar programáticamente el marcado de la página.
Consejo para 1 sitio web redimensionando la altura. Pero puedes cambiar a 2 sitios web.
Aquí está mi código para cambiar el tamaño de un iframe con un sitio web externo. Debe insertar un código en la página principal (con código iframe) y también en el sitio web externo, por lo tanto, esto no funcionará si no tiene acceso para editar el sitio web externo.
local:
<IFRAME STYLE="width:100%;height:1px" SRC="http://www.remote-site.com/" FRAMEBORDER="no" BORDER="0" SCROLLING="no" ID="estframe"></IFRAME>
<SCRIPT>
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent,function(e) {
if (e.data.substring(0,3)=='frm') document.getElementById('estframe').style.height = e.data.substring(3) + 'px';
},false);
</SCRIPT>
Es necesario este prefijo "frm" para evitar problemas con otros códigos embebidos como Twitter o Facebook plugins. Si tiene una página simple, puede eliminar el prefijo "si" y "frm" en ambas páginas (secuencia de comandos y carga).
remoto:
Usted necesita jQuery para llevar a cabo sobre la altura de la página "real". No puedo darme cuenta de cómo hacerlo con JavaScript puro, ya que tendrás problemas cuando cambies el tamaño de la altura (de mayor a menor altura) usando body.scrollHeight o relacionado. Por alguna razón, siempre devolverá la mayor altura (prerredimensionada).
<BODY onload="parent.postMessage('frm'+$('#master').height(),'*')" STYLE="margin:0">
<SCRIPT SRC="path-to-jquery/jquery.min.js"></SCRIPT>
<DIV ID="master">
your content
</DIV>
Entonces, la página primaria (iframe) tiene una altura predeterminada de 1px. El script inserta un "esperar mensaje/evento" del iframe. Cuando se recibe un mensaje (mensaje posterior) y los primeros 3 caracteres son "frm" (para evitar el problema mencionado), obtendrá el número desde la 4ª posición y establecerá la altura del cuadro (estilo), incluida la unidad "px".
El sitio externo (cargado en el iframe) "enviará un mensaje" al padre (abridor) con el "frm" y el alto del div principal (en este caso id "maestro"). El "*" en postmensaje significa "cualquier fuente".
Espero que esto ayude. Lo siento por mi ingles.
Eso no es posible en mi humilde opinión [Ver esto] (http://stackoverflow.com/questions/3298210/how-to-embed-a-resized-website-throught-an-iframe). –
Gracias por la respuesta. –
Usted es bienvenido :-) –