0

我resize:both;在 CSS 中使用来调整 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 上工作的解决方案

4

1 回答 1

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>
于 2013-07-26T01:12:32.510 回答