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に引き戻され気味です・・・。引力が−。