首页 文章

vimeo / YouTube iframe视频轮事件

提问于
浏览 次
0

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

即页面中有类似的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 回答

  • 0

    我有同样的问题，这是我的解决方案：

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

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

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

    笔记：

    • 事件不可能'recicle'，需要克隆

    • WheelEvent构造函数复制了许多但不是所有原始 event 属性

    • 克隆事件不是 isTrusted

    • 事件转发附加到iframe document . 只有文档不变，它才会起作用 . 因此，一旦加载了最终文档，您应该运行上面的代码

    • 访问iframes文档可能会让您遇到跨域麻烦

    回复于

相关问题