Vimeo iFrame Kradzież Wheel Mouse wydarzenie na Firefox

Zrobiłem ten przykład tutaj: http://jsbin.com/pokahec/edit?html,output Vimeo iFrame Kradzież Wheel Mouse wydarzenie na Firefox

// 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); 
}

}) (okno, dokument);

można przetestować w Firefoksie że przewinąć zdarzenie jest zwolniony, z wyjątkiem gdy na Vimeo iframe (i chyba żadnej iFrame)

Czy istnieje rozwiązanie na ogień zdarzenia na iframe?

PS - Chcę użyć tego w zwyczaju przewijania

Źródło

2015-07-14 digitalzoomstudio

To jest w zasadzie zgodne z projektem. Twój kod powinien być całkowicie nieświadomy tego, co robi użytkownik wewnątrz IFRAME (szczególnie z innego źródła, takiego jak YouTube - jest to część architektury bezpieczeństwa sieci, zgodnie z zasadą tego samego pochodzenia).

Teraz, nawet w przypadku skrzynek źródłowych przeglądarki mogą zezwolić, aby przewijanie wpłynęło na przodka ramki, jeśli sama ramka nie przewija. To przewijanie powinno się zdarzyć bez zdarzeń odpalanych na ostatnim dokumencie - patrz zachowanie Chrome jeśli przewiń do dołu tej IFRAME i przechowywać przewijania: 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 
});

Zobaczysz, że kiedy przewiniesz do końca IFRAME, główny dokument zostanie przewinięty, ale żadne zdarzenia nie zostaną uruchomione, dopóki wskaźnik myszy nie znajdzie się nad dokumentem nadrzędnym.

Źródło

2015-07-20 12:23:28 hallvors

, więc nie hack możliwe? – digitalzoomstudio

Cóż, przypuszczam, że możesz umieścić przezroczysty DIV na IFRAME - ale Twój gość prawdopodobnie utraci możliwość odtwarzania/wstrzymywania wideo. – hallvors

Ponadto, jeśli dodasz atrybut "scrolling = no" w IFRAME, przeglądarka nie będzie przewijać zawartości IFRAME osobno.Nie wiem, czy to pomoże w przypadku użycia - zewnętrzna strona będzie przewijana po uniesieniu IFRAME, ale nie otrzymasz żadnych zdarzeń, dopóki IFRAME nie będzie przeszkadzać. – hallvors

Wygląda na to, że jest to błąd w Firefoksie: https://bugzilla.mozilla.org/show_bug.cgi?id=1084121

Więc nie może być prostym sposobem, aby sobie z tym poradzić. Ale ponieważ akcja działa, nawet jeśli nie jest wysyłana, istnieje możliwość obejścia tego problemu. Może nie działać w każdej sytuacji, ale powinna obejmować wiele przypadków.

Zamiast wykrywać wheel event, można wykryć scroll i użyć przełącznika wykrywającego kliknięcie myszą lub nie. Jeśli okno przewija się, a myszka nie jest kliknięta, najprawdopodobniej jest to od mousewheel. Inne przypadki będą, jeśli uruchomisz je ze skryptu, w którym to przypadku można to łatwo obsłużyć.

Jeden przypadek, którego nie załatwisz, to sytuacja, w której okno nie może już przewijać, więc nie dostaniesz zdarzenia.

To będzie wyglądać następująco:

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/

Źródło

2015-07-20 01:18:11

fajnie, ale to mi nie pomaga - po pierwsze, nie mogę wykryć delta koła – digitalzoomstudio

sekunda, celem jest niestandardowy pasek przewijania, nadmiar ciała jest ukryty, więc nie przewija się (czyli nie ma zdarzenia przewijania) - sprawdź nowy przykład – digitalzoomstudio

Vimeo iFrame Kradzież Wheel Mouse wydarzenie na Firefox

Odpowiedz

Powiązane problemy