Question

我有以下HTML页面，其中有三个iframe。我想允许用户使用Javascript手动调整iframe的高度和宽度。

<body>
<table>
    <tr>
        <td colspan="2" id = "freebase_td">
        <iframe id = "freebase_frame" src="" width="100%" height="400px"></iframe>
        </td>
    </tr>
    <tr>
        <td align="left" id = "wiki_td">
        <iframe id = "wiki_frame" src="" width="100%" height="400px"></iframe>
        </td>
        <td align="right" id = "imdb_td">
        <iframe id = "imdb_frame" src="" width="100%" height="400px"></iframe>
        </td>
    </tr>
</table>
</body>

Answer 1

你最好的选择是使用一个库来执行此操作，例如jQueryUI Resizable - 这样做有很多浏览器间的怪癖。特别是当您需要允许用户指定任意大小/调整大小时，可拖动的调整大小句柄几乎总是允许用户调整元素大小的最直观方式。如果您只是调整iframe的大小，那么直接设置iframe的宽度/高度应该没问题，但这样做并没有做任何事情以直观的方式从用户那里获得新的宽度/高度。

另请参阅Resizing iFrame with jQuery UI - 您需要将iframe包装在div中，将iframe设置为height = 100％width = 100％，并使div可调整大小。如果您创建裸iframe Draggable，则拖动调整大小将无法正常工作。（这是某些浏览器中的事件冒泡限制，而不是jQuery错误本身。）

Answer 2

我选择避免像诅咒那样的iFrame。我知道这不是你所要求的，但请查看jQueryUI's Resizable。

如果您更改基础结构，您可能会发现这是一个更具可伸缩性/长期性的解决方案。

注意：Resizable可以应用于任何DOM元素！

Answer 3

这不起作用吗？

document.getElementById('wiki_frame').style.width = '300px';

Answer 4

$(function(){
    $("table td").css({position:'relative'})
    $("div.resizer").appendTo($("table td")).each(function(){

     $(this).width(20);
     $(this).height(20);
     $(this).css({
          position:"absolute",
          top: $(this).parent().height() - 20,
          left: $(this).parent().width() - 20
     });
     var resize = false;
     var $td;
     var pos;
     $(this).mousedown(function(e){resize = true;$td =$(this).parent(); pos = {left:e.pageX,top:e.pageY});});
      $(document).mousemove(function(e){

           if( resize ){
                  $td.height( $td.height() + e.pageY - pos.top );
                  $td.width( $td.width() + e.pageX- pos.left);
            }
       });
       $(document).mouseup(function(){

            resize = false;
      });
    });
})();

Answer 5

在现代浏览器中，您不需要使用javascript。只是一个小的HTML + CSS技巧。在启用了resize属性的div中封装iframe。

<div>
  <iframe src="https://www.example.com/"></iframe>
</div>

<style>
div {
  overflow: hidden;
  resize: both;
}
iframe {
  height: 100%;
  width: 100%;
  border: none;
}
</style>

演示：https://jsfiddle.net/eliz82/k53a41ej/

使IFrame动态调整大小

5 个答案: