title: postMessage() event listener not working
body: <p>I am working with a 3rd party who supplies a URL to be put into an iFrame to display some hosted video playback.</p>
  <ul>
  <li>this is cross-domain</li>
  <li>they use JWPlayer as their player of choice</li>
  </ul>
  <p>I requested a way to 'know' when the video playback is complete.  From reading, looks like the postMessage() callback is what many use.. and is what the 3rd vendor suggested, and mentioned they would implement.</p>
  <p>I was given a TEST url that has this 'call back' function in it... and to see if I can could use it.</p>
  <p>I can not seem to get any alert from the callback/listener functions?</p>
  <p>As this is the first time I am implementing this, Im not sure if the error stems from my end or theirs?
  I'm thinking it may be the path form the postMessage() function?</p>
  <p>After firebugging the code.. I eventually fund their JS/callback set up here:</p>
  <pre><code>jwPI.on('complete', function(event){
                  playbackTime= playbackTime + (jwPI.getPosition() - positionA);
                  positionA=jwPI.getPosition();
                  parent.postMessage('EndVideo','*'); 
              });
  </code></pre>
  <p>My side of things has the simple event listener added like so:</p>
  <pre><code>window.addEventListener(&quot;message&quot;, function(evt) {
          //do whatever
          alert(&quot;VIDEO CALLBACK FIRED&quot;);
      });
  </code></pre>
  <p>My questions are:</p>
  <p>1.)  Why is this not working?  a target/scope issue?
  2.) Do I need to have the 3rd party vendor update the path in their postMessage() callback?   where does '.parent' actually point to? (if this is an embedded iFrame?)  and there are DIV's..etc..etc..etc  housing the nested iFrame content?</p>
  <p>my listener function is in the main parent file that loads this iFrame?</p>
  <p>3.) Can I just leave it as 'as-is' and somehow change the path/target in my listener?</p>
  <p>Solution posted:</p>
  <ul>
  <li><p>here is a both a jQuery and JS solution
  ** note the jQuery approach need to use originalEvent in the scope</p>
  <pre><code>      //jQuery approach
        $(window).on(&quot;message onmessage&quot;, function(evt) {
            //message
            var targetData = evt.originalEvent.data;            
            //origin
            var targetOrigin = evt.originalEvent.origin;
            //check origin for security and to make Scott proud
            if(targetOrigin !== 'https://example.com'){
                //no same origin, exploit attempt in process possibly
            }           
            //do whatever
        });
  
  
  
        //Javascript approach
        window.addEventListener(&quot;message&quot;, function(evt) {  
            //message
            var targetData = evt.data;
            //source
            var targetSource = evt.source;  //iframe source message stems from - doesnt work            
            //origin
            var targetOrigin = evt.origin;
            if(targetOrigin !== 'https://example.com'){
                //no same origin, exploit attempt in process possibly
            }
            //do whatever
        });
  </code></pre>
  </li>
  </ul>