Pregunta Cambiar el tamaño del contenido del sitio web externo para que se ajuste al ancho del iFrame


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)?


30
2017-07-08 10:38


origen


Respuestas:


Lo que puede hacer es establecer el ancho y la altura específicos para 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.

P.ej.

<iframe width="1024" height="768" src="http://www.bbc.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>

60
2017-07-08 11:09



Consejo para 1 sitio web que cambia el tamaño de 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.

  • página local (iframe): solo inserte un fragmento de código
  • página remota (externa): necesita una "carga de cuerpo" y un "div" que contiene todos los contenidos. Y el cuerpo necesita un estilo a "margen: 0"

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>

Necesita este prefijo "frm" para evitar problemas con otros códigos embebidos como los complementos de Twitter o Facebook. Si tiene una página simple, puede eliminar el prefijo "si" y "frm" en ambas páginas (secuencia de comandos y carga).

Remoto:

Necesita jQuery para lograr una altura de 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 padre (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 la "frm" y la altura del div principal (en este caso id "maestro"). El "*" en postmensaje significa "cualquier fuente".

Espero que esto ayude. Lo siento por mi ingles.


2
2018-05-14 19:16