Javascript 调整大小：在第一次交互之前更改JS中的大小时，两者的行为都不同

我使用

resize:both以调整Iframe的大小。
当以编程方式调整Iframe的大小时，我有一个问题

如果手动调整iframe的大小（即手动拖动），然后通过编程方式（使用JS）调整iframe的大小，则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>


.Resizer{resize:both；}
函数按钮单击（）{
var iFrame=document.getElementById（“theId”）；
var iFrameStyleAttr=document.createAttribute（'style'）；
iFrameStyleAttr.nodeValue='宽度：400px；高度：300px；'；
iFrame.setAttributeNode（iFrameStyleAttr）；
}

在任何情况下，我如何实现减小Iframe大小的能力

编辑：我希望有一个不使用JQuery或任何类似库的解决方案。

编辑2：我需要一个解决方案来使用Google Chrome 28.0
我认为默认情况下iFrame无法调整大小。您的解决方案仅在Chrome 28.0上对我有效

使用jQuery和jQueryUI会容易得多。
尝试将这些文件附加到文档的标题部分：

<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#iFrameCon，.大小调整器{宽度：150px；高度：50px；}

如您所见，我已经给出了div和maximize按钮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可调整大小插件，它可以使用简单的拖动方法调整iframe及其容器的大小：

<script>
   $(function() {
        $("#iFrameCon").resizable({
            alsoResize: "#theId"
        });
        $("#Maximize").click(function(){
            $("#iFrameCon, #theId").css({ "width": "400px", "height": "300px"});
        });
   });
</script>


$（函数（）{
$（“#iFrameCon”）。可调整大小({
同样大小：“theId”
});
$（“#最大化”）。单击（函数（）{
$（“#iFrameCon，#theId”）.css（{“宽度”：“400px”，“高度”：“300px”）；
});
});

希望能有帮助

编辑

好的，这就是纯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>


div#iFrameCon{resize:both；溢出：auto；高度：100px；宽度：300px；}
.Resizer{高度：100%；宽度：100%；}
函数按钮单击（）{
var iFrameCon=document.getElementById（“iFrameCon”）；
iFrameCon.style.width=“400px”；
iFrameCon.style.height=“300px”；
}
Id宁愿有一个没有JQuery的解决方案。如果它可以用纯CSS来完成，我宁愿用那个解决方案。回答得不错。我担心如果你想让它成为跨浏览器的，并且能够正常工作，那么仅仅使用CSS是不可能的。用纯JS编程也将是对轮子的彻底改造。然而，当涉及到网络开发时，你不能总是确信某件事是绝对不可能的，因此也许其他人会找到解决办法；）经过编辑的解决方案在FF中的效果与预期的一样。然而，在Chrome中，它基本上存在与问题中所述相同的问题，而且有两个光标可以调整大小，这使得设计看起来很弱。实际上，我想要一个在Chrome上工作的解决方案，因为这是我工作的公司正在使用的，这是一个内部项目。对FF解决方案的高度评价。。