vimeo/YouTube iframe 视频轮事件答案

【问题标题】：vimeo/YouTube iframe video wheel eventvimeo/YouTube iframe 视频轮事件
【发布时间】：2015-02-18 20:33:00
【问题描述】：

我正在做一个 Firefox 插件来拦截 Youtube 或 Vimeo 的嵌入式 iframe 视频上的滚轮鼠标事件。我让它在正常的 YT/vimeo 页面上工作（将侦听器附加到窗口，然后查看 event.target 以识别视频），问题在于标签：它不会拦截“wheel”事件（例如“鼠标悬停”有效）。

即页面中有类似的HTML代码：

<iframe src="//player.vimeo.com/video/89055435/fallback?noscript" frameborder="0"></iframe>

这行得通：

iframes[i].addEventListener("mouseover", func, false);

对于“轮子”，我也这样做：

iframes[i].addEventListener("wheel", myFunc, false);
or
iframes[i].contentWindow.addEventListener("wheel", myFunc, false);

没有结果。我也尝试捕获而不是冒泡：什么都没有。

我也试过这个：

window.addEventListener("wheel", myFunc, false);

这适用于页面的每个 obj，但不适用于 iframe 本身。我还与侦听器一起设置了一个 setTimeout，以查看 iframe 是否未完全加载：没有任何变化。

http://jsfiddle.net/chtNP/121/

那么，当我在一个带有视频的 iframe 上时，我应该怎么做才能让我的轮子事件发生，或者如何从窗口中获取所有轮子，包括那些在 iframe 上的轮子？

【问题讨论】：

标签： javascript iframe youtube

【解决方案1】：

我遇到了同样的问题，这是我的解决方案：

var iframe = document.querySelector('iframe');

iframe.contentDocument.addEventListener('wheel', event => 
    iframe.dispatchEvent(new WheelEvent('wheel', event))
);

这会将 iframe 文档中的每个 wheel-event 转发到父文档中的 iframe 元素。

注意事项：

无法“记录”该事件，它需要被克隆
WheelEvent 构造函数复制了许多但不是所有原始events 属性
克隆的事件不是isTrusted
事件转发附加到 iframe 文档。只要文档没有改变，它就会起作用。因此，您应该在加载最终文档后运行上述代码
访问 iframe 文档可能会让您陷入跨域问题

【讨论】：