jQueryで別ウインドウのイベントをtriggerする
Posted: Updated:
別ウインドウの要素をtriggerしてイベント発火
するには、otherWindow.$('someSelector').trigger('someEvent')
でOK。別ウインドウの要素にイベント的にアクセスしたければ、そのウィンドウのjQueryオブジェクトを通しましょうということで。(jQueryに限ったこっちゃないでしょうね)
liveイベントやカスタムイベントでも同様に使えますが、クロスドメインはもちろんダメです。
例えば親ウインドウにイベントがあって
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>親ウインドウ</title> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script> jQuery(function($) { $('#opener').click(function() { window.open('child.html'); }); $('#eventHolder').bind('click', function() { alert('チリンチリン♪'); }); }); </script> </head> <body> <button id="opener">子ウインドウを開くよ</button> <div id="eventHolder">イベントもってますよ</div> </body> </html>
子ウインドウからイベントを鳴らせる
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>子ウインドウ</title> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script> jQuery(function($) { $('#eventCaller').click(function() { window.opener.$('#eventHolder').trigger('click'); }); }); </script> </head> <body> <button id="eventCaller">親ウインドウのイベントを鳴らすよ</button> </body> </html>
余談
ちなみに手近で試したところ、Firefox 10ではネイティブイベント(liveイベントやカスタムイベントはダメ)であれば$('someSelector', otherWindow).trigger('click')
でも発火しちゃいましたが、Chrome 17やSafari 5ではダメでした。そんな感じで。
近ごろ、なんだかjQueryとかPHPに引き戻され気味です・・・。引力が−。