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

【问题标题】：jqueryui resizable Unable to set iframe as resizablejqueryui resizable 无法将 iframe 设置为可调整大小
【发布时间】：2009-10-31 22:34:16
【问题描述】：

我正在尝试使用 iframe 调整大小的 jquery ui。

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

示例： http://jsbin.com/uyolu

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

【问题讨论】：

标签： jquery jquery-ui iframe

【解决方案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）

例如当您的浏览器不支持 iframe 时，您会看到一个可调整大小的元素，上面写着“你好”

#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>

【讨论】：

非常感谢，这与我在如何解决问题方面得出的结论相同。但是我仍然想知道为什么会出现问题，以及这是否是一个错误。