使用 iframe 的 jquery 事件委托

Question

我有一个包含视频图像缩略图的页面。当访问者点击缩略图时，我有一个动态创建的叠加层，用于播放视频。叠加层是一个 div，其中包含一个 iframe，其中包含视频的 html 标记（html5 视频标记）。 此 iframe 内容托管在同一站点上，因此不存在跨域问题。

我想做的是使用 jQuery 将视频事件与视频挂钩。此代码位于父页面上。事情就是这样。视频加载后，我可以把它放到控制台中，效果很好：

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

但是，我真正需要做的是将其转换为可在 iframe 存在之前 成为委托事件的东西。

我尝试过各种方法，例如

// 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”委托事件，然后使用 .contents()... 但据我所知，这是一个突变（？）事件和对它的支持有点阴暗。

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

所以.. 我有点希望我首先遗漏了 iframe 中的委托事件，或者如果我的 setTimeout 解决方案在这个时候真的是较小的邪恶.. 想法？

编辑更多信息：

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

我无法控制/无法更改此设置（繁文缛节）。

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

Answer 1

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

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

感谢这里： https://stackoverflow.com/a/12967903/1905055