web-dev-qa-db-fra.com

Comment puis-je rendre un iframe redimensionnable?

Nous avons ce projet de groupe et j'ai été chargé de faire un certain iframe redimensionnable. J'ai lu beaucoup de messages sur le forum depuis la semaine dernière, et j'ai découvert que iframe lui-même ne peut pas être redimensionnable.

Existe-t-il un moyen de rendre mon iframe redimensionnable?

csscss3iframeresizable
33
amielopez

Cela peut être fait en CSS pur, comme ceci:

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

Réglez la hauteur et la largeur à la taille minimale que vous souhaitez, elle ne semble que croître, pas rétrécir.

Exemple en direct: https://jsfiddle.net/xpeLja5t/

Cette technique a bon support dans tous les principaux navigateurs sauf IE .

46
Nicole Sullivan

Ces étapes rendront un iframe redimensionnable:

  1. Créez un div pour redimensionner. par exemple:

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

  2. Appliquez la balise de style pour le style 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. Inclure jQuery et 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. Exécutez Resizable

    $(function () {
    $(".resizable").resizable({
        animate: true,
        animateEasing: 'swing',
        animateDuration: 500
    });
});
14
kuldeep raj

Avec 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/

Explication:

Comme le plugin resizable de jQuery UI ne fonctionnera pas directement sur un iframe, encapsulez l'iframe dans un div et redimensionnez-le à la place. L'événement resize dans le code ci-dessus garantit que l'iframe se redimensionne pour correspondre au div.

Il y a cependant un problème supplémentaire avec cette méthode - les iframes ne transmettent pas les événements de mouvement de la souris à leur élément parent. Pour contourner ce problème, les événements start et stop couvrent l'iframe avec un autre élément pendant le redimensionnement, afin que le plugin resizable puisse suivre correctement le mouvement de la souris.

Pour une raison quelconque, donner au div wrapper une taille explicite est nécessaire pour que le redimensionnement fonctionne. Dans la plupart des cas, cela signifie que l'iframe a besoin du même ensemble de taille, de sorte qu'il correspond à la taille de la division dès le début.

9
Brilliand

Si vous n'avez pas encore trouvé la solution, j'ai réussi avec:

Jquery:

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

HTML:

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

J'espère que ça aide

7
Sthe

J'ai trouvé votre solution:

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});
        }
    });
});
3
Mayur Borad

La meilleure solution que j'ai trouvée est de définir la largeur et la hauteur de l'iframe à 100% et de mettre l'iframe dans une balise div. Il s'agit de la solution de base que vous voyez avec des outils comme CKEditor.

Pour un exemple, j'ai quelques boîtes de dialogue jQuery qui font exactement cela sur le tah's Disclosures Site . Si vous cliquez sur un rapport ou une déclaration de ou, vous verrez une boîte de dialogue qui apparaît avec un iframe dedans. J'espère que cela aide.

2
uadrive

très facile,

premier -

ajoutez jquery et 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>

puis -

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

dernier -

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

C'est fait!

<!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>

formulaire http://jqueryui.com/resizable/

0
Vibhaas Srivastava