Vimeo iFrame Stealing Mouse Wheel - событие в Firefox

Я сделал этот пример здесь: http://jsbin.com/pokahec/edit?html,output

// creates a global "addWheelListener" method
// example: addWheelListener( elem, function( e ) { console.log( e.deltaY ); e.preventDefault(); } );
(function(window,document) {

var prefix = "", _addEventListener, onwheel, support;

// detect event model
if ( window.addEventListener ) {
    _addEventListener = "addEventListener";
} else {
    _addEventListener = "attachEvent";
    prefix = "on";
}

// detect available wheel event
support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
          document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
          "DOMMouseScroll"; // let's assume that remaining browsers are older Firefox

window.addWheelListener = function( elem, callback, useCapture ) {
    _addWheelListener( elem, support, callback, useCapture );

    // handle MozMousePixelScroll in older Firefox
    if( support == "DOMMouseScroll" ) {
        _addWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
    }
};

function _addWheelListener( elem, eventName, callback, useCapture ) {
    elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function( originalEvent ) {
        !originalEvent && ( originalEvent = window.event );

        // create a normalized event object
        var event = {
            // keep a ref to the original event object
            originalEvent: originalEvent,
            target: originalEvent.target || originalEvent.srcElement,
            type: "wheel",
            deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
            deltaX: 0,
            deltaZ: 0,
            preventDefault: function() {
                originalEvent.preventDefault ?
                    originalEvent.preventDefault() :
                    originalEvent.returnValue = false;
            }
        };

        // calculate deltaY (and deltaX) according to the event
        if ( support == "mousewheel" ) {
            event.deltaY = - 1/40 * originalEvent.wheelDelta;
            // Webkit also support wheelDeltaX
            originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX );
        } else {
            event.deltaY = originalEvent.detail;
        }

        // it's time to fire the callback
        return callback( event );

    }, useCapture || false );
}

}) (Окно, документ);

Вы можете проверить в Firefox, что событие прокрутки запускается, за исключением случаев, когда над vimeo iframe (и я думаю, что любой iFrame)

Есть ли какое-либо решение для запуска события на iframe?

PS - я хочу использовать это в пользовательской полосе прокрутки

Источник

2 ответа

Решение

Это в основном дизайн. Ваш код должен быть полностью не осведомлен о том, что пользователь делает внутри IFRAME (особенно из другого источника, такого как YouTube - это часть архитектуры безопасности в Интернете, как того требует политика одного источника).

Теперь даже в кросс-исходном случае браузеры могут разрешить прокрутке влиять на предка фрейма, если сам фрейм не прокручивается. Эта прокрутка должна происходить без каких-либо событий для верхнего документа - посмотрите поведение Chrome, если вы прокрутите до конца этого IFRAME и продолжите прокрутку: http://jsfiddle.net/8cj0dofx/1/ HTML:

<iframe src="data:text/html,<body style='background:grey;height:550px'>Hello" seamless></iframe>
<div style="height:100px">Hello</div>

JS:

document.addEventListener('DOMMouseScroll', function(e){
    document.getElementsByTagName('div')[0].firstChild.data += ' ' + e.type
});

document.addEventListener('mousewheel', function(e){
    document.getElementsByTagName('div')[0].firstChild.data += ' ' + e.type
});

Вы увидите, что после прокрутки до конца IFRAME будет прокручиваться главный документ, но никакие события не будут срабатывать, пока мышь не окажется над родительским документом.

Источник

Похоже, что это ошибка в Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1084121

Так что не может быть прямого способа справиться с этим. Но поскольку действие имеет эффект, даже если оно не отправляется, существует обходной путь, который можно использовать. Это может не сработать в любой ситуации, но должно охватывать многие случаи.

Вместо обнаружения wheel eventвы обнаруживаете scrollи используйте переключатель, определяющий, нажата ли мышь или нет. Если окно прокручивается, а мышь не нажимается, то, скорее всего, из mousewheel, Другие случаи будут, если вы запустите его из скрипта, и в этом случае это также может быть легко обработано.

Один случай, который вы не обработаете, - это когда окно больше не может прокручиваться, тогда вы не получите событие.

Это будет выглядеть так:

var mouseDown = false;

function handle_wheel() {
    if (!mouseDown) {
        document.getElementById("debug-textarea").value = document.getElementById("debug-textarea").value + ' wheel';
    } else {
        document.getElementById("debug-textarea").value = document.getElementById("debug-textarea").value + ' scroll';
    }
}

window.onscroll = handle_wheel;
window.onmousedown = function () {
    mouseDown = true;
}
window.onmouseup = function () {
    mouseDown = false;
}

http://jsfiddle.net/wu9y6yua/4/

Источник

Я столкнулся с той же проблемой, но с функцией увеличения при прокрутке.

Поскольку невозможно захватить событие колеса мыши без взлома, я думаю, что лучший вариант - разместить прозрачный div над iframe и добавить параметр &autoplay=1 в URL-адрес vimeo/youtube при нажатии.

Источник
Другие вопросы по тегам