मैं इस कोड है और यह ठीक काम करता है:रीसाइज़िंग iFrame jQuery यूआई
प्रमुख
<script>
$(document).ready(function()
{
$("#test").resizable({minHeight: 50, minWidth: 50});
});
</script>
शरीर
<div id="test" style="border: .1em solid black;">
</div>
लेकिन जब मैं "आइफ्रेम" में मेरी "div" बदल रहा अब इसका आकार बदल नहीं सकते हैं।
शरीर
<iframe id="test" style="border: .1em solid black;">
</iframe>
redsquare के डेमो थोड़ा wonky मिले जब माउस एक बार में कुछ पिक्सल से ज्यादा घूम रहा है।
<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>
आकार बदलने के weirdness होने की वजह से MouseMove घटनाओं iframe के भीतर से बुलबुला नहीं है लगता है: मैं एक जोड़ी संशोधनों कि मदद एक बहुत चिकनी आकार बदलने बनाने लागू किया है। एक आकार बदलने वाले हैंडलर और हैंडलर सीएसएस में एक बड़ी सीमा का उपयोग आईफ्रेम के कारण होने वाले प्रभाव को कम करता है जब तक कि ब्राउज़र mousemove घटनाओं के साथ रह सकता है।
साझा करने कैसे आई फ़्रेम के साथ अस्थिर आकार तय करने के लिए के लिए धन्यवाद, यह मुझे पागल गाड़ी चला रहा था! :) – Rachel
चटनी आकार बदलने के लिए एक वैकल्पिक फिक्स 'iframeFix' पैच पोस्ट किया गया है [यहां] (http://bugs.jqueryui.com/attachment/ticket/4903/jquery.ui.resizable-iframeFix.patch)। यह आकार बदलने के दौरान माउस को कैप्चर करने से iframes को रोकता है। – Rachel
मुझे लगता है कि यह वही हो सकता है जो आप खोज रहे हैं: किसी भी div में जो भी है, उसकी सामग्री रखें। इस उदाहरण के लिए मैं div को "कंटेनर" की आईडी दूंगा।
$('#ID_iframe').css("height", "" + $('#ID_iframe').contents().find("#container").height() + "px");
कोड कोड नीचे मेरे लिए आसान तरीके से काम करता है।
<!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>
मैं Resize iframe searchin के लिए यहाँ उतरा, लेकिन इस सवाल jQuery के यूआई प्लगइन, मैं सिर्फ एक जवाब द्वारा जोड़ा जा रहा का उपयोग कर तो यह भविष्य में कोई है जो यह पेज आइफ्रेम आकार बदलने के लिए खोज में गिर जाता है के लिए उपयोगी हो सकता है आकार बदलने के बारे में है । यह केवल सीएसएस
iframe {
height: 300px;
width: 300px;
resize: both;
overflow: auto;
}
उपयोग किया जा सकता इसके अलावा सभी प्रमुख ब्राउज़रों अच्छा समर्थन है। Check out this link और भी browser support
यहाँ एक जवाब के बारे में: http://stackoverflow.com/a/13473569/676479 – Oleg