締切済み

iframe内部でJquery UI res

2012/04/27 10:21

以下のようにiframe内の画像にはjquery ui resizableが有効になりません。なぜでしょうか。iframe外の画像には有効です。　 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.8.19/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css" /> <script> $(function() { $("#ifm").contents().find("body").append('<img src="../static/image/logo.gif" class="resizable" />'); $( ".resizable" ).resizable(); }); </script> </head> <body> <img src="../static/image/logo.gif" class="resizable" width="200" height="50"/> <iframe id="ifm" ></iframe> </body> </html>

h275v
お礼率25% (1/4)

JavaScript
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

みんなの回答

fujillin
ベストアンサー率61% (1594/2576)

2012/04/27 19:15 回答No.2

#1です。大切なことを書き忘れてしまいました。仮にiframe内の要素を指定できたとしても、resizable();で呼ばれているjquery ui resizable本体が、別ドキュメントに対応できる記述のしかたになっていないとやはり動作しないでしょう。（documentの参照先が違ってしまうので）ドキュメントの位置に関係なく動作できるようにスクリプトを作成しておくことは可能ですが、jquery ui resizableがそのようになっているかは知りません。

fujillin
ベストアンサー率61% (1594/2576)

2012/04/27 11:31 回答No.1

理由を簡単に言うと、「別ドキュメントだから」でしょうか。 $(".resizable")だとそのドキュメント内の要素しか対象にならないので、試しに　$(".resizable").click(function(){alert("clicked");}); とでもしてみれば、わかるかと思います。　$(".resizable",$("#ifm").contents().find("body")).click(function(){alert("clicked2");}); だと、追加した画像クリックで反応するかと思います。ついでに言うなら、iframe内のドキュメントの取得方法がブラウザによって異なりますので、ご提示の　$("#ifm").contents().find("body") ではfx系では取得できないようです。ｊＱｕｅｒｙでどうなっているかは知りませんが、 // Mozilla 系　iframe.contentWindow;　　　 // window 参照　iframe.contentDocument;　　// document 参照 // IE 系　iframe.contentWindow;　　　　// window 参照　iframe.contentWindow.document;　// document 参照となっているようです。

質問者