Question

我在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的解决方案

Answer 1

我认为默认情况下iframe不可调整大小。您的解决方案仅适用于Chrome 28.0。

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

<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>

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

1 个答案: