permite - wordpress iframe not working

¿Puedes hacer un iFrame receptivo?

Question

Quiero insertar 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.

¿Podría envolver esto en una etiqueta div que responda o puedo hacer que un iFrame responda?

Gracias.

Answer 1

Depende de lo que desee que responda el iframe : 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), puede agregar dimensiones relativas usando valores de porcentaje al elemento iframe , por ejemplo, mediante una hoja de estilo:

html,body {
    height:100%;
}

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

Para que esto funcione, también necesitas el conjunto de html y body al 100% de altura, no me preguntes por qué :-) pero esta magia solo funciona.

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

Me gustaría agregar mi opinión personal: preferiblemente, JavaScript no se debe usar para resolver un problema de diseño. Para eso, use 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 guiones.

Answer 2

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 iframe wrapper responda. Pero el contenido en él - será el mismo que era - (como dije antes) a menos que sea su página también)

Answer 3

Esto funciona bien para mí: https://jsfiddle.net/koaab543/2/

Estoy usando la altura y el ancho originales para calcular proporciones. Luego, obtiene el ancho actual que está limitado al tamaño de la pantalla con css, y obtiene una nueva altura a partir de eso.

alto / ancho = x / ancho actual

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>

Answer 4

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

Puedes probar el método para cambiar el tamaño a través de jquery. de ¿Cómo se crea el cambio automático de tamaño de un iframe cuando se reduce el tamaño de su 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 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 de los contenidos dentro del marco qué tan bien ese cambio de tamaño realmente funciona para usted. Pero es un comienzo.