¿Puedes hacer que un iFrame responda?

3 minutos de lectura

Quiero incrustar un sitio web en una página de WordPress de otro sitio web.

el sitio web iframed es una página de procesamiento de formularios de contacto en asp y no responde.

¿Puedo envolver esto en una etiqueta div que responda o puedo hacer que un iFrame responda?

Gracias.

  • Posible duplicado de ¿Cómo hacer que un IFrame responda en iOS Safari?

    – Michael Freidgeim

    5 de marzo de 2018 a las 20:07

  • No creo que esto sea necesariamente un duplicado, ya que era específico de iOS Safari y las respuestas aquí ofrecen una variedad de soluciones diferentes que las personas pueden encontrar útiles.

    – Ushka

    8 de marzo de 2018 a las 3:36

  • ¿Responde esto a tu pregunta? Hacer que un iframe responda

    – Michael Freidgeim

    16 de julio de 2020 a las 0:14

Depende de lo que quieras el iframe responder a: a los cambios del bloque contenedor o a los cambios de contenido dentro del iframe.

Si desea que el iframe se adapte al tamaño del bloque que lo contiene (p. ej., el usuario cambia el tamaño de la ventana del navegador), es posible que desee agregar dimensiones relativas mediante valores porcentuales al iframe elemento, por ejemplo, por medio de una hoja de estilo:

html,body {
    height:100%;
}

iframe {
  width:80%;
  height:80%;
}

Para que esto funcione, también necesita el html y cuerpo configurado al 100% de altura, no me preguntes por qué 🙂 pero esta magia simplemente funciona.

Ejemplo: http://jsfiddle.net/4z2hn/

Me gustaría añadir mi opinión personal: Preferiblemente, JavaScript no debe usarse para resolver un problema de diseño. Para eso, usa CSS en su lugar. El poder de las implementaciones actuales de CSS permite flexibilidad estilística y brinda posibilidades de diseño que antes no estaban disponibles. Solo si todo lo demás falla, recurra a una solución con guión.

avatar de usuario
donlaur

No estoy seguro de qué elementos hay en la página asp del formulario de contacto.

Puede probar el método para cambiar el tamaño a través de jquery. de ¿Cómo se crea un cambio de tamaño automático de un iframe cuando se reduce el tamaño del navegador?

$(window).resize(function() {
  $('IFRAME').width($(window).width());
});

O usa el otro método.

Cambiar el tamaño del ancho de un iframe en el cambio de tamaño de la ventana

$(function() {
   var newwidth = $(window).width() - 250;
   $('iframe').css({width: newwidth+'px'});
});

$(window).resize(function() {
   var newwidth = $(window).width() - 250;
   $('iframe').css({width: newwidth+'px'});
});

Depende del contenido dentro del marco qué tan bien funcione ese cambio de tamaño para usted. Pero es un comienzo.

avatar de usuario
apuestas

Para cambiar el tamaño y mantener las proporciones originales.

  1. Use la altura y el ancho originales para calcular proporciones
  2. Obtenga un nuevo ancho (que es% de tamaño con css)
  3. Derivar nueva altura

X / newWidth = originHeight / originWidth

X = newWidth * (origenHeight / originWidth )

X = Nueva Altura

Mira aquí:
https://jsfiddle.net/koaab543/2/

function responseveIframe() {
  $('iframe').height(
    $('iframe').attr("height") / $('iframe').attr("width") * $('iframe').width()
  );
}

responseveIframe();

$(window).resize(function() {
  responseveIframe();
});
iframe {
  max-width: 98%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<iframe width="854" height="480" src="https://www.youtube.com/embed/C0DPdy98e4c"></iframe>

avatar de usuario
Iwona Trabka

No puede hacer que el contenido de iframe responda si no es su página. Puedes agregar estilo iframe

iframe {
  width: 100%;
}

para hacer que el envoltorio iframe responda. Pero el contenido en él será el mismo que era (como dije, a menos que también sea su página)

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad