Resizing iFrame with jQuery UI

2019-01-11 18:17发布

站内问答 / jQuery
1156 4 4

I have this code and it works fine:

Head

    <script>
    $(document).ready(function()
    {
        $("#test").resizable({minHeight: 50, minWidth: 50});
    });
</script>

Body

<div id="test" style="border: .1em solid black;">
</div>

However when I change my "div" into "iframe" I can't resize it anymore.

Body

<iframe id="test" style="border: .1em solid black;">
</iframe>

4条回答
成全新的幸福
2楼-- · 2019-01-11 19:00

I think this might be what you are looking for: Place the content of whatever is in your iframe in a div. For this example I will give the div an id of "container".

$('#ID_iframe').css("height", "" + $('#ID_iframe').contents().find("#container").height() + "px");
查看更多
0人赞 添加讨论(0) 举报
看我几分像从前
3楼-- · 2019-01-11 19:14

Found redsquare's demo a bit wonky when moving the mouse more than a few pixels at a time. I've applied a couple modifications that help make resizing a lot smoother:

<html>
<head>
  <style type="text/css"> 
    #resizable { width: 150px; height: 150px; padding: 0.5em; }
    #resizable h3 { text-align: center; margin: 0; }
    .ui-resizable-helper { border: 75px solid #EFEFEF; margin: -75px; }
  </style> 
  <script type="text/javascript"> 
    $(function() {
      $("#resizable").resizable({
        helper: "ui-resizable-helper"
      });
    });
  </script> 
</head> 
<body> 
  <div class="demo"> 
    <div id="resizable" class="ui-widget-content"> 
      <iframe src="http://pastebin.me/f9ed9b9d36d17a7987e9cb670e01f0e2" class="ui-widget-content" frameborder="no" id="test" width="100%" height="100%" />
    </div> 
  <div>
</body>
</html>

The weirdness of resizing seems to happen because mousemove events don't bubble up from within the iframe. Using a resize handler and a large border in the handler CSS minimizes the effect caused by the iframe as long as the browser can keep up with the mousemove events.

查看更多
0人赞 添加讨论(0) 举报
放荡不羁爱自由
4楼-- · 2019-01-11 19:18

I landed up here for searchin Resize iframe, But this question is about resizing using Jquery UI plugin, I am just adding a answer so it might be helpful for someone in future who falls into this page searching to resize iframe. This can be done using only CSS

iframe {
  height: 300px;
  width: 300px;
  resize: both;
  overflow: auto;
}

Also all the major browsers have good support. Check out this link and also about the browser support

查看更多
0人赞 添加讨论(0) 举报
女痞
5楼-- · 2019-01-11 19:20

Below Code Work for me in smooth way.

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Resizable - Default functionality</title>
  <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.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

  <style>

  #iframe {
  width: 100%;
  height: 100%;
  border: none;    

  background: #eee ;


  z-index: 1;
}

#resizable {
  width: 100px;
  height: 100px;
  background: #fff;
  border: 1px solid #ccc;


  z-index: 9;
}
  </style>
  <script>
  $(function() {
    $('#resizable').resizable({
      start: function(event, ui) {
        $('iframe').css('pointer-events','none');
         },
    stop: function(event, ui) {
        $('iframe').css('pointer-events','auto');
      }
  });
  });
  </script>
</head>
<body>

<div id="resizable">
  <iframe src="test.html" id="iframe">

</div>


</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)