我在 CSS 中使用 resize:both;
来调整 Iframe 的大小。
以编程方式调整 Iframe 大小时遇到一个问题。
如果手动调整 iframe 的大小(即手动拖动),然后然后以编程方式调整大小(使用 JS),则 iframe 的行为与其应有的行为一致,并且可以调整为任意大小。
但是,如果 iframe 未手动调整大小(即手动拖动),然后以编程方式(使用 JS)将其调整为更大的大小,则此新大小将成为 iframe 可以拥有的最小大小,并且iframe 只能变得更大。
<div>
<input type="button" value="Maxmize" onclick="ButtonClick()"></input>
<input type="button" value="Remove"></input>
<div>
<iframe id="theId" class="Resizer" src="">
</iframe>
</div>
</div>
<style type="text/css">
.Resizer {resize: both;}
</style>
<script>
function ButtonClick() {
var iFrame = document.getElementById("theId");
var iFrameStyleAttr = document.createAttribute('style');
iFrameStyleAttr.nodeValue = 'width:400px;height:300px;';
iFrame.setAttributeNode(iFrameStyleAttr);
}
</script>
无论哪种情况,我如何才能实现减小 Iframe 大小的能力?
编辑:我宁愿有一个不使用 JQuery 或任何类似库的解决方案。
编辑 2:我需要一个在 Google Chrome 28.0 上工作的解决方案
最佳答案
我认为 iframe 默认情况下不可调整大小。您的解决方案仅适用于 Chrome 28.0。
使用 jQuery 和 jQuery UI 会容易得多。 尝试将这些文件附加到文档的头部:
<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.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
然后你应该为 iframe 和包含它的 div 设置初始宽度和高度:
<style type="text/css">
div#iFrameCon, .Resizer { width: 150px; height: 50px; }
</style>
如您所见,我已经给出了 div 和最大化按钮 id 属性,因此使用 jQuery 更容易选择它们:
<input id="Maximize" type="button" value="Maxmize"></input>
<input type="button" value="Remove"></input>
<div id="iFrameCon">
<iframe id="theId" class="Resizer ui-widget-content" src="">
</iframe>
</div>
现在您需要的是 jQuery UI Resizable 插件,它可以通过简单的拖动方法调整 iframe 及其容器的大小:
<script>
$(function() {
$("#iFrameCon").resizable({
alsoResize: "#theId"
});
$("#Maximize").click(function(){
$("#iFrameCon, #theId").css({ "width": "400px", "height": "300px"});
});
});
</script>
希望对你有帮助
编辑
好的,这就是纯 JS 和 CSS 方法。我已经对其进行了测试,它适用于 FF v.22 和 Chrome 28.0。然而,它在所有版本的 IE 中都失败了。
<div>
<input type="button" value="Maxmize" onclick="ButtonClick()"></input>
<input type="button" value="Remove"></input>
<div id="iFrameCon">
<iframe id="theId" class="Resizer" src="">
</iframe>
</div>
</div>
<style type="text/css">
div#iFrameCon { resize: both; overflow: auto; height: 100px; width: 300px; }
.Resizer { height: 100%; width: 100%; }
</style>
<script>
function ButtonClick() {
var iFrameCon = document.getElementById("iFrameCon");
iFrameCon.style.width = "400px";
iFrameCon.style.height = "300px";
}
</script>
关于javascript - 调整大小 :both behaves different when changing size in JS before first interaction,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17870835/