css - bootstrap - ¿Cómo puedo hacer que un iframe sea redimensionable?

video youtube responsive html5

Question

Tenemos este proyecto grupal y me asignaron para hacer que un cierto iframe pueda redimensionar. He estado leyendo muchas publicaciones en el foro desde la semana pasada, y descubrí que el propio iframe no puede redimensionarse.

¿Hay alguna manera de hacer que mi iframe redimensionable?

Answer 1

Con jQuery UI ...

HTML:

<div class="resizable" style="width: 200px; height: 200px;">
    <iframe src="http://www.example.com/" style="width: 100%; height: 100%;"></iframe>
</div>

JavaScript:

$(".resizable").resizable({
    start: function(event, ui) {
        ui.element.append($("<div/>", {
            id: "iframe-barrier",
            css: {
                position: "absolute",
                top: 0,
                right: 0,
                bottom: 0,
                left: 0,
                "z-index": 10
        }
        }));
    },
    stop: function(event, ui) {
        $("#iframe-barrier", ui.element).remove();
    },
    resize: function(event, ui) {
        $("iframe", ui.element).width(ui.size.width).height(ui.size.height);
    }
});

jsFiddle: http://jsfiddle.net/B5vHQ/97/

Explicación:

Dado que el complemento de resizable jQuery UI no funcionará en un iframe directamente, ajuste el iframe en un div y cambie el tamaño del div en su lugar. El evento de cambio de resize en el código anterior asegura que el iframe cambia el tamaño para que coincida con el div.

Sin embargo, hay un problema adicional con este método: los iframes no pasan los eventos de movimiento del mouse a su elemento principal. Para evitarlo, los eventos de start y stop cubren el iframe con otro elemento durante el cambio de tamaño, de modo que el complemento de resizable variable puede seguir el movimiento del mouse correctamente.

Por alguna razón, es necesario que el div contenedor tenga un tamaño explícito para que el redimensionamiento funcione. En la mayoría de los casos, eso significa que el iframe necesita el mismo tamaño de conjunto, de modo que coincida con el tamaño del div desde el principio.

Answer 2

En caso de que aún no haya encontrado la solución, he tenido éxito con:

Jquery:

$("#my-div-frame-wrapper").resizable({
    alsoResize : ''#myframe''
});

HTML:

<div id="my-div-frame-wrapper">
    <iframe id="myframe"></iframe>
</div>

Espero que ayude

Answer 3

Encontré tu solución:

HTML:

<div id="resizable" class="ui-widget-content" 
     style="border-style:solid; height:400px; width:400px">
    <h3 class="ui-widget-header">Resizable</h3>
    <iframe src="test.aspx" id="myfr" scrolling="no"
            frameborder="0" marginheight="0" marginwidth="0" >
        Your Browser Do not Support Iframe
    </iframe>
</div>

JQUERY:

$(function() {
    $("#resizable").resizable();

    $("#resizable").resizable({
        resize: function(event, ui) {
            $("#myfr").css({ "height": ui.size.height,"width":ui.size.width});
        }
    });
});

Answer 4

Esto se puede hacer en CSS puro, así:

iframe {
  height: 300px;
  width: 300px;
  resize: both;
  overflow: auto;
}

Establezca la altura y el ancho del tamaño mínimo que desee, solo parece crecer, no encogerse.

Ejemplo en vivo: https://jsfiddle.net/xpeLja5t/

Esta técnica tiene un buen soporte en todos los principales navegadores, excepto en IE .

Answer 5

La mejor solución que he encontrado es establecer el ancho y alto del iframe al 100% y colocar el iframe dentro de una etiqueta div. Esta es la solución básica que ves con herramientas como CKEditor.

Por ejemplo, tengo algunos cuadros de diálogo de jQuery que hacen justamente eso en el sitio de divulgaciones de Utah . Si hace clic en un informe o en una declaración de o, verá un diálogo que aparece con un iframe. Espero eso ayude.

Answer 6

Siga estos pasos para cambiar el tamaño de Iframe:

1. Crea un div para redimensionar. p.ej:

   <div class="resizable"></div>

2. Aplica la etiqueta de estilo para el estilo de div.

   .ui-resizable-helper {
       border: 1px dotted gray;
   }
   .resizable {
       display: block;
       width: 400px;
       height: 400px;
       padding: 30px;
       border: 2px solid gray;
       overflow: hidden;
       position: relative;
   }
   iframe {
       width: 100%;
       height: 100%;
   }

3. Incluye jQuery y jQuery UI

   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-    ui.css"rel="stylesheet" />
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

4. Ejecutar Resizable

   $(function () {
       $(".resizable").resizable({
           animate: true,
           animateEasing: ''swing'',
           imateDuration: 500
       });
   });

Answer 7

muy fácil,

primero -

agregar jquery y jquery-ui -

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

entonces -

<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>

último -

<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>

¡Está hecho!

<!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.4/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.4/jquery-ui.js"></script>
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>

forma http://jqueryui.com/resizable/