jqueryui resizable Unable to set iframe as resizable_问答_开发者

jqueryui resizable Unable to set iframe as resizable

开发者 https://www.devze.com 2022-12-10 03:08 出处：网络

I\'m trying to use jquery ui resizable with iframe. It simply does not work, I don\'t see any handles at all. However the class ui-resizable is added.

I'm trying to use jquery ui resizable with iframe.

It simply does not work, I don't see any handles at all. However the class ui-resizable is added.

Sample: htt开发者_JAVA技巧p://jsbin.com/uyolu

Is this normal? How do I fix? Thanks.

That resizable doesn't work could be considered a bug. (Hint maybe file one?). But it is certainly disputable.

For elements which don't support child nodes there is a special check in the plugin

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

if this matches a wrapper div is automatically generated for you by the plugin.

If you append iframe to this list

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

The sample would work like provided by you.

But iframe accepts children, the problem is you only seem them when your browser doesn't support inline frames. You can check the following if your browser allows you to turn of iframe support (e.g. Opera)

e.g. when your browser doesn't understand iframes you would see a resizable element which says "hello"

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

But as most browsers understand iframes you don't get to see the children of the iframe. The handles used by jquery resizable are a div which gets appended to the element so you don't get see the handles.

In the end I conclude that the resizable plugin in the special case iframe behaves correctly and you should just wrap your iframe in a div.

Hope I was clear.

The div showed the resizable controls for me. Only the iframe did not show the controls.

The following works for me:

wrapped iframe in a div
made div resizable
wrapper div and iframe initial same width and height
pass iframe id in as option to resizable() {alsoResize: '#iframeid'}

Check out http://jsbin.com/arato/ or the following.

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