title: How do you share events accross windows on same domain?
body: <p>Suppose I have an iframe on my page and I have an event that can be triggered from either the parent or inside the frame but I need listeners on both pages to execute when either one is triggered. What is the best way to accomplish this?</p>
  <p>Both pages are on the same domain so don't think I need to worry about same origin security policy issues.</p>
  <p>I'm using jQuery but happy to go with naked JavaScript if required.</p>
  <p>What I've tried so far, distilled to a simple example:</p>
  <p>On parent:</p>
  <p>HTML:</p>
  <pre><code>&lt;input type=&quot;button&quot; value=&quot;Click me&quot;/&gt;
  &lt;iframe src='child.html'/&gt;&lt;/iframe&gt;
  </code></pre>
  <p>JS:</p>
  <pre><code>$(function() {
    var $iframe = $('iframe');
    $(document).on('custom_event', function() {
      alert('hello from parent!');
      $($iframe[0].contentWindow.document).trigger('custom_event');
    });
    $('input').on('click', function() {
      $(document).trigger('custom_event');
    });
  });
  </code></pre>
  <p>On child:</p>
  <p>HTML:</p>
  <pre><code>&lt;input type=&quot;button&quot; value=&quot;Click me too&quot;/&gt;
  </code></pre>
  <p>JS:</p>
  <pre><code>$(function() {
    $('input').on('click', function() {
      $(document).trigger('custom_event');
    });
    $(document).on('custom_event', function() {
      alert('hello from child!');
      $(window.parent.document).trigger('custom_event');
    });
  });
  </code></pre>
  <p>I expect clicking either button to also trigger 'custom_event' in the other window. I.e in the parent to be able to trigger events in the frame via <code>$iframe.contentWindow.document</code>, and likewise in the frame to be able to trigger events via <code>window.parent.document</code>, but alas no! No errors, warnings or any other clues.</p>
  <p>Am I doing something wrong, missing something obvious or is this just not possible?</p>