Question

我正在与第三方合作，该第三方提供要放入iFrame的网址以显示某些托管视频播放。

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

我要求一种方法来了解＆＃39;视频播放完成后。从阅读开始，看起来像postMessage（）回调是许多人使用的......并且是第三个供应商建议的，并提到他们将实现。

我收到了一个测试网址，其中包含了这样的回复信息。功能...并看看我是否可以使用它。

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

由于这是我第一次实施此功能，我不确定错误是源于我的结束还是他们的？我认为它可能是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");
    });

我的问题是：

为什么这不起作用？目标/范围问题？
我是否需要让第三方供应商更新其postMessage（）回调中的路径？＆＃39; .parent＆＃39;实际上指向？（如果这是一个嵌入式iFrame？）并且有DIV等等，可以存放嵌套的iFrame内容？

我的侦听器功能位于加载此iFrame的主父文件中？
我可以将其保留为＆＃39; as-is＆＃39;并以某种方式改变我的听众的路径/目标？

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
        });

postMessage（）事件侦听器无法正常工作

1 个答案: