tengo este código y funciona bien:redimensionamiento iFrame con jQuery UI
Cabeza
<script>
$(document).ready(function()
{
$("#test").resizable({minHeight: 50, minWidth: 50});
});
</script>
cuerpo
<div id="test" style="border: .1em solid black;">
</div>
Sin embargo, cuando cambio mi "div" en "iframe" Yo no puede redimensionarlo más.
cuerpo
<iframe id="test" style="border: .1em solid black;">
</iframe>
encontrado demostración de redsquare un poco torcidas cuando se mueve el ratón más de unos pocos píxeles a la vez. He aplicado un par de modificaciones que ayudan a hacer el cambio de tamaño mucho más suave:
<html>
<head>
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 75px solid #EFEFEF; margin: -75px; }
</style>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
helper: "ui-resizable-helper"
});
});
</script>
</head>
<body>
<div class="demo">
<div id="resizable" class="ui-widget-content">
<iframe src="http://pastebin.me/f9ed9b9d36d17a7987e9cb670e01f0e2" class="ui-widget-content" frameborder="no" id="test" width="100%" height="100%" />
</div>
<div>
</body>
</html>
la rareza de cambio de tamaño parece suceder porque los acontecimientos mousemove no lo hacen burbujas desde dentro del marco flotante. Al usar un controlador de cambio de tamaño y un borde grande en el controlador, CSS minimiza el efecto causado por el iframe, siempre que el navegador pueda mantenerse al día con los eventos mousemove.
Gracias por compartir cómo solucionar el cambio de tamaño entrecortado con iframes, me estaba volviendo loco! :) – Rachel
Una solución alternativa para el cambio de tamaño entrecortado es agregar el parche 'iframeFix' publicado [aquí] (http://bugs.jqueryui.com/attachment/ticket/4903/jquery.ui.resizable-iframeFix.patch). Impide que iframes capture el mouse durante el cambio de tamaño. – Rachel
Creo que esto podría ser lo que estás buscando: coloca el contenido de lo que está en tu iframe en un div. Para este ejemplo, le daré al div un id de "contenedor".
$('#ID_iframe').css("height", "" + $('#ID_iframe').contents().find("#container").height() + "px");
Debajo del código Trabaja para mí de manera suave.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#iframe {
width: 100%;
height: 100%;
border: none;
background: #eee ;
z-index: 1;
}
#resizable {
width: 100px;
height: 100px;
background: #fff;
border: 1px solid #ccc;
z-index: 9;
}
</style>
<script>
$(function() {
$('#resizable').resizable({
start: function(event, ui) {
$('iframe').css('pointer-events','none');
},
stop: function(event, ui) {
$('iframe').css('pointer-events','auto');
}
});
});
</script>
</head>
<body>
<div id="resizable">
<iframe src="test.html" id="iframe">
</div>
</body>
</html>
aterricé aquí para searchin Resize iframe, pero esta pregunta trata sobre el cambio de tamaño utilizando jQuery UI plug-in, sólo estoy añadiendo una respuesta por lo que podría ser útil para alguien en el futuro que cae en esta página en busca de cambiar el tamaño de marco flotante . Esto se puede hacer utilizando sólo CSS
iframe {
height: 300px;
width: 300px;
resize: both;
overflow: auto;
}
También todos los principales navegadores tienen un buen apoyo. Check out this link y también sobre la browser support
Aquí una respuesta: http://stackoverflow.com/a/13473569/676479 – Oleg