multiselect - ui jquery button
Cambio de tamaño de iFrame con jQuery UI (4)
Tengo este código y funciona bien:
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" por "iframe", ya no puedo modificar su tamaño.
Cuerpo
<iframe id="test" style="border: .1em solid black;">
</iframe>
Debajo del código, trabaje para mí de manera fluida.
<!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>
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");
La demostración de redsquare se encontró un poco inestable al mover el mouse más de unos pocos píxeles a la vez. He aplicado un par de modificaciones que ayudan a que el cambio de tamaño sea mucho más sencillo:
<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 del redimensionamiento parece ocurrir porque los eventos de mousemove no brotan desde dentro del iframe. 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.
Aterricé aquí para buscar en Resize iframe , pero esta pregunta es sobre el cambio de tamaño usando el plugin Jquery UI, solo estoy agregando una respuesta, por lo que podría ser útil para alguien en el futuro que entra en esta página buscando cambiar el tamaño del iframe. Esto se puede hacer usando solo CSS
iframe {
height: 300px;
width: 300px;
resize: both;
overflow: auto;
}
Además, todos los principales navegadores tienen un buen soporte. Vea este enlace y también sobre el soporte del navegador