jquery マウスイベントを奪うiframe
2012/03/08
iframeの上にdivを被せれば良いらしい。
メモ
「JQuery Spliter Plugin」ってので、ページを上下に分割ってのをしていた。
で、下をiframeにしようとていたんだけど変な感じ。
しょうがないのでdivの中にiframeをいれてみたら問題発生。
上下に分割で上方向にリサイズ可能だけど下方向にリサイズ不可って問題。
下記のような感じ。
<div>
<div>上のdiv</div>
<div>
<iframe>下のdiv内のiframe</iframe>
</div>
</div>
<div>上のdiv</div>
<div>
<iframe>下のdiv内のiframe</iframe>
</div>
</div>
調べていたらiframeってヤツは「マウスイベントを奪う」らしい。
対処としてiframeにdivを被せるってのがあるみたい。
ベース
<div>
<div>上のdiv</div>
<div>
<div>iframeに被せるdiv</div>
<iframe>下のdiv内のiframe</iframe>
</div>
</div>
<div>上のdiv</div>
<div>
<div>iframeに被せるdiv</div>
<iframe>下のdiv内のiframe</iframe>
</div>
</div>
上記のような感じにするんだけどCSSの設定が必要。
ベースにCSS追加
まず、普段はマウスイベントを気にする必要がないので被せてるDIVは見せない。
次にiframeに被せるんだからposition指定。
他にもいくつか記載されていただけど…とりあえず下記のような感じ。
<div>
<div>上のdiv</div>
<div>
<div style="display:none; opacity:0.5; color:#000; position:absolute; top:0; left:0; width:100%; height:100%; zindex:1;">iframeに被せるdiv</div>
<iframe>下のdiv内のiframe</iframe>
</div>
</div>
<div>上のdiv</div>
<div>
<div style="display:none; opacity:0.5; color:#000; position:absolute; top:0; left:0; width:100%; height:100%; zindex:1;">iframeに被せるdiv</div>
<iframe>下のdiv内のiframe</iframe>
</div>
</div>
jqueryを追加
リサイズ中とリサイズ完了時に「iframeに被せるdiv」の表示のON/OFFする必要がある。
普段は、表示OFF。
リサイズ中は、表示ON。
リサイズ完了したら、表示OFF。
リサイズ中は、表示ON。
リサイズ完了したら、表示OFF。
「JQuery Spliter Plugin」ってのだとリサイズする際に「div.splitterMask」を作成。完了時には削除。
ってことで「.splitterMask」の記述を探してその後に「iframeに被せるdiv」の表示のON/OFFを記述する。
表示ONは、下記
$('「iframeに被せるdiv」').css('display', 'block');
$('「iframeに被せるdiv」').css('display', 'block');
表示OFFは、下記
$('「iframeに被せるdiv」').css('display', 'none');
リサイズしてもiframeがリサイズされない
現段階だと当然のコト。
iframeのリサイズの処理を追加していないんだからね。
ってことで、表示OFFした際にiframeのリサイズの処理も追加することに。
iframeの親要素のdivの高さをiframeに設定
$('iframe').css('height', panel_2.attr('offsetHeight'));
※「JQuery Spliter Plugin」での「iframeの親要素」は「panel_2」に格納（？）される。
$('iframe').css('height', panel_2.attr('offsetHeight'));
※「JQuery Spliter Plugin」での「iframeの親要素」は「panel_2」に格納（？）される。