代码之家 › 专栏 › 技术社区 › Jourkey

JQueryUI Resizable无法将iframe设置为Resizable

iframe jquery-ui jquery

Jourkey · 技术社区 · 15 年前

我正在尝试使用jquery ui resizable with iframe。

它根本不起作用,我看不到任何手柄。但是,添加了可调整大小的类UI。

Sample: http://jsbin.com/uyolu

这是正常的吗?我该怎么修理?谢谢。

1 回复 | 直到 11 年前

jitter 15 年前

这种可调整大小的方法不起作用,可能被认为是一个错误。( 暗示也许可以申请一份?)但这无疑是有争议的。

对于不支持子节点的元素,插件中有一个特殊的签入

if(this.element[0].nodeName.match(/canvas|textarea|input|select|button|img/i)) {

如果匹配,则插件会自动为您生成一个包装DIV。

如果你追加 iframe 这个清单

if(this.element[0].nodeName.match(/canvas|textarea|input|select|button|img|iframe/i)) {

样品的工作方式与您提供的一样。

但是iframe接受子对象,问题是只有当浏览器不支持内联框架时,您才会看到它们。如果您的浏览器允许您打开iframe支持(例如 Opera )

例如,当您的浏览器不理解iframes时,您会看到一个可调整大小的元素,上面写着“hello”

#iframeid { background-color:green; height:200px; width:400px}
$("#helloiframe").resizable();
<iframe id="iframeid" src="http://google.com" ><p>hello</p></iframe>

但是,正如大多数浏览器理解iframe一样,您无法看到iframe的子级。jquery resizable使用的句柄是一个被附加到元素的DIV,因此您不会看到句柄。

最后,我得出结论,在特殊情况下,可以调整大小的插件iframe的行为是正确的,您应该将iframe包装在一个div中。

希望我是清白的。

DIV为我显示了可调整大小的控件。只有iframe没有显示控件。

以下对我有效:

将iframe包装在一个分区中
使DIV可调整大小
wrapper div和iframe初始宽度和高度相同
将iframe id作为选项传递给 resizable() {alsoResize: '#iframeid'}

退房 http://jsbin.com/arato/ 或以下内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <title>Sandbox</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <style type="text/css" media="screen">
      body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
      #test { background-color: red; height: 200px; width: 400px; }
      #hello { background-color: blue; height: 200px; width: 400px; }
      #helloiframe { height: 200px; width: 400px; }
    </style>
    <script type="text/javascript">
      $(document).ready(function() {
        $("#test").resizable();
        $("#hello").resizable({ alsoResize: '#helloiframe' });
      });
    </script>
  </head>
  <body>
    <div id="test">Hello from JS Bin</div>
    <div id="hello">
      <iframe id="helloiframe" src="http://google.com"></iframe>
    </div>
  </body>
</html>