J'ai ce code et il fonctionne très bien:Redimensionnement iFrame avec jQuery UI
Head
<script>
$(document).ready(function()
{
$("#test").resizable({minHeight: 50, minWidth: 50});
});
</script>
corps
<div id="test" style="border: .1em solid black;">
</div>
Cependant quand je change mon "div" dans "iframe" I Je ne peux plus le redimensionner.
corps
<iframe id="test" style="border: .1em solid black;">
</iframe>
Trouvé démo de redsquare un peu bancal lors du déplacement de la souris plus de quelques pixels à la fois. J'ai appliqué une modification couple qui contribuent à rendre le redimensionnement beaucoup plus lisse:
<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 bizarrerie de Redimensionnement semble se produire parce que les événements mousemove ne le font pas bouillonner à l'intérieur de l'iframe. Utilisation d'un gestionnaire de redimensionnement et d'une grande bordure dans le gestionnaire CSS minimise l'effet causé par l'iframe tant que le navigateur peut suivre les événements mousemove.
Merci de partager comment résoudre le Redimensionner saccadé avec iframes, ça me rend fou! :) – Rachel
Une autre solution pour le redimensionnement saccadé consiste à ajouter le patch 'iframeFix' posté [ici] (http://bugs.jqueryui.com/attachment/ticket/4903/jquery.ui.resizable-iframeFix.patch). Il empêche les iframes de capturer la souris lors d'un redimensionnement. – Rachel
Je pense que cela pourrait être ce que vous cherchez: Placez le contenu de ce qui est dans votre iframe dans un div. Pour cet exemple, je donnerai au div un identifiant de "container".
$('#ID_iframe').css("height", "" + $('#ID_iframe').contents().find("#container").height() + "px");
Ci-dessous Code Travaillez pour moi de manière fluide.
<!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>
Je débarquèrent ici pour searchin Resize iframe, mais cette question est sur le redimensionnement en utilisant le plugin JQuery UI, je suis juste l'ajout d'une réponse de sorte qu'il pourrait être utile pour quelqu'un à l'avenir qui tombe dans cette page la recherche de redimensionner iframe . Cela peut être fait en utilisant uniquement CSS
iframe {
height: 300px;
width: 300px;
resize: both;
overflow: auto;
}
également tous les principaux navigateurs ont un bon soutien. Check out this link et aussi sur la browser support
Voici une réponse: http://stackoverflow.com/a/13473569/676479 – Oleg