使用jQuery UI调整iFrame的大小

前端之家收集整理的这篇文章主要介绍了使用jQuery UI调整iFrame的大小前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有这个代码,它工作正常:

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

身体

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

但是,当我将“div”改为“iframe”时,我无法调整大小.

身体

<iframe id="test" style="border: .1em solid black;">
</iframe>
@H_301_17@解决方法
发现redsquare的演示有点犹豫不决,一次移动鼠标超过几个像素.我已经应用了一些修改,帮助调整大小更加顺利:
<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>

调整大小的奇怪性似乎发生了,因为mousemove事件不会从iframe中冒出来.只要浏览器可以跟上mousemove事件,在处理程序中使用调整大小的处理程序和大的边框,最小化iframe引起的影响.

原文链接:https://www.f2er.com/jquery/180314.html

猜你在找的jQuery相关文章