javascript - jquery 事件委托(delegate)与 iframe

Question

我有一个页面，其中包含视频的图像缩略图。当访问者单击缩略图时，我会动态创建一个覆盖层，用于播放视频。覆盖层是一个 div，其中包含一个 iframe，其中包含视频的 html 标签(html5 视频标签)。 此 iframe 内容托管在同一网站上，因此不存在跨域问题。

我想做的是使用 jQuery 将视频事件 Hook 到视频。其代码位于父页面上。所以事情是这样的。视频加载后，我可以将其放入控制台，它工作得很好:

$('body iframe[src*="VideoOverlay"]').contents().find('video').on('timeupdate',function(){console.log('Time: ',this.currentTime);})

但是，我真正需要做的是将其转换为在 iframe 存在之前充当委托(delegate)事件的东西。

我尝试过各种方法，例如

// attempt #1
$('body').on('timeupdate',function(){console.log('Time: ',this.currentTime);});

// attempt #2
$('body').on('timeupdate','iframe[src*="VideoOverlay"]',function(){console.log('Time: ',this.currentTime);})

..还有其他一些小的变化，但它不起作用。我的猜测是，事件不会从子窗口冒泡到父窗口，这对于跨域窗口是有意义的，但我认为如果它是同一域，也许会发生，但事实并非如此(？)。

所以..我认为下一个最好的办法是执行某种“iframe 已添加”委托(delegate)事件，然后使用 .contents()... 但尽我所能告诉你，这是一个突变(？)事件并且对它的支持有点可疑。

所以.. 据我所知，下一个最好的事情是检查 iframe 是否存在并将其包装在 setInterval 中，但我不太喜欢这个解决方案，因为 a) 事情像这样有性能方面的考虑，b)我需要考虑到它与视频事件相比并不完美。例如，我需要 Hook 视频播放(视频自动播放)，我可能会错过该事件，以及一定量的毫秒(无论我的间隔是多少)等。IOW，它会导致一些丑陋的编码..

所以..我希望我可能首先遗漏了 iframe 中的委托(delegate)事件，或者我的 setTimeout 解决方案目前确实是两害相权取其轻的解决方案..想法？

编辑更多信息:

我知道有像 youtube API 和其他视频框架这样的 API 可以处理这些东西。这不是 youtube videos 或其他一些 API。它是直接在我自己的网站上托管的 .mp4 视频，与父页面相同的域，使用常规 html5 视频标签。需要注意的是，它作为单独的 iframe 内容包含在内。

我没有控制/能力来更改此设置(繁文缛节)。

我(也许 - 再次，繁文缛节)确实能够将事件处理程序代码放入 iframe 内容本身，这可以解决我的问题，但会引入其他问题。这里的最终目标是触发谷歌分析跟踪来跟踪视频交互。谷歌分析库位于父页面上。我知道我可以做类似 window.parent 的事情，但这也让事情变得复杂，这也是我想避免的解决方案，因为每个视频都有自己的 iframe 文件，所以我必须对我想避免的所有当前和 future 的视频文件进行更改..

Answer 1

您可以从 iframe 内专门触发父级中的事件。

parent.$('body').trigger('eventName');

归功于这里: https://stackoverflow.com/a/12967903/1905055