Question

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

它根本不起作用，我根本看不到任何句柄。但是，可以添加ui-resizable类。

这是正常的吗？我该如何解决？感谢。

Answer 1

可调整大小不起作用可能被视为错误。（提示可能是文件一个？）。但它肯定是有争议的。

对于不支持子节点的元素，插件中有一个特殊的检查

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）

，则可以检查以下内容

e.g。当您的浏览器不理解iframe时，您会看到一个可调整大小的元素，上面写着“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没有显示控件。

以下适用于我：

在div中包装iframe
使div可调整大小
包装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>

jqueryui resizable无法将iframe设置为可调整大小

1 个答案: