jQueryで別ウインドウのイベントをtriggerする

別ウインドウの要素を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に引き戻され気味です・・・。引力が−。


Author

ahomuAyumu Sato

KINTOテクノロジーズ株式会社

Web 技術、組織開発、趣味など雑多なブログ。技術の話題は zenn、ご飯の話題はしずかなインターネットにも分散して投稿しています。

Bio: aho.mu
X: @ahomu
Zenn: ahomu
GitHub: ahomu
Sizu: ahomu

Related

Latest

Archives

Tags

Search