Bu kodu vardır ve iyi çalışıyor:boyutlandırma'nın iFrame jQuery UI
Başkanı
<script>
$(document).ready(function()
{
$("#test").resizable({minHeight: 50, minWidth: 50});
});
</script>
Vücut
<div id="test" style="border: .1em solid black;">
</div>
Ancak "iframe" içine ben benim "div" değiştirdiğinizde artık yeniden boyutlandıramaz.
Vücut
<iframe id="test" style="border: .1em solid black;">
</iframe>
bir seferde birkaç pikselden daha fazla fare ile gelindiği zaman redsquare demo biraz sakat buldum.
<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>
boyutlandırma garabeti mousemove olaylar iframe içinden yukarı baloncuğu yok çünkü ne gibi görünüyor: Ben çok daha düzgün boyutlandırma olmasına yardımcı birkaç modifikasyonlar uyguladık. Yeniden boyutlandırma işleyicisi ve işleyicide CSS'de büyük bir kenarlık kullanılması, tarayıcı mousemove olaylarına ayak uydurabildiği sürece iframe'nin neden olduğu etkiyi en aza indirir.
teşekkür, beni deli oldu! :) – Rachel
Dalgalı yeniden boyutlandırma için alternatif bir düzeltme, burada yüklenen "iframeFix" yamasını eklemektir (http://bugs.jqueryui.com/attachment/ticket/4903/jquery.ui.resizable-iframeFix.patch). Yeniden boyutlandırma sırasında iframe'lerin fareyi yakalamasını önler. – Rachel
Bu sizin aradığınız şey olabileceğini düşünüyorum: iframe'inizdeki içeriği bir div olarak yerleştirin. Bu örnek için div'a "kapsayıcı" kimliğini vereceğim.
$('#ID_iframe').css("height", "" + $('#ID_iframe').contents().find("#container").height() + "px");
Aşağıdaki Kod Çalışırken düzgün çalış.
<!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>
Ben Resize iframe searchin için buraya indi, Ama bu soru, iframe yeniden boyutlandırmak için arama Bu sayfanın içine düşer gelecekte birisi için yararlı olabilir, böylece, sadece bir cevap ekliyorum jQuery UI eklentisi kullanarak yeniden boyutlandırma hakkında . Ayrıca tüm büyük tarayıcılar iyi desteğe sahip Bu yalnızca CSS
iframe {
height: 300px;
width: 300px;
resize: both;
overflow: auto;
}
kullanılarak yapılabilir. Check out this link ve ayrıca İşte browser support
Bir yanıttan: http://stackoverflow.com/a/13473569/676479 iframe'lerle dalgalı yeniden boyutlandırma nasıl düzeltileceği paylaşımı için – Oleg