event-listener - postMessage() 事件监听器不工作

Question

我正在与第 3 方合作，后者提供要放入 iFrame 中以显示一些托管视频播放的 URL。

• 这是跨域的
• 他们使用 JWPlayer 作为他们选择的播放器

我请求一种方法来“知道”视频播放何时完成。从阅读来看，postMessage() 回调似乎是很多人使用的......并且是第三个供应商建议的，并提到他们将实现。

我得到了一个测试 url，里面有这个“回调”功能……看看我是否可以使用它。

我似乎无法从回调/监听器函数中获得任何警报？

因为这是我第一次实现这个，我不确定这个错误是我的还是他们的？ 我在想这可能是 postMessage() 函数的路径？

在调试代码之后..我最终资助了他们在这里设置的 JS/回调:

jwPI.on('complete', function(event){
                playbackTime= playbackTime + (jwPI.getPosition() - positionA);
                positionA=jwPI.getPosition();
                parent.postMessage('EndVideo','*'); 
            });

我这边添加了简单的事件监听器，如下所示:

window.addEventListener("message", function(evt) {
        //do whatever
        alert("VIDEO CALLBACK FIRED");
    });

我的问题是:

1.) 为什么这不起作用？目标/范围问题？ 2.) 我是否需要让第 3 方供应商更新其 postMessage() 回调中的路径？ “.parent”实际上指向哪里？ (如果这是一个嵌入式 iFrame？)并且有 DIV 的..等..等..等等容纳嵌套的 iFrame 内容？

我的监听器函数在加载此 iFrame 的主要父文件中？

3.) 我可以将它保持“原样”并以某种方式更改我的监听器中的路径/目标吗？

解决方案发布:

• 这是一个 jQuery 和 JS 解决方案 ** 注意 jQuery 方法需要在范围内使用 originalEvent

        //jQuery approach
        $(window).on("message onmessage", 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("message", 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
        });
  

Answer 1

(代表问题作者发布了答案)。

这是一个 jQuery 和 JS 解决方案。请注意，jQuery 方法需要在范围内使用 originalEvent。

        //jQuery approach
        $(window).on("message onmessage", 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("message", 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
        });