Swiper in iframe bug

[dmaus]

This is a:

• bug
• Swiper Version: 4.0.7
• Live Link:
  https://dmaus.github.io/Swiper-iframe/
  (https://github.com/dmaus/Swiper-iframe)

What you did

Init swiper in an iframe from the parent window

Expected Behavior

Drag should work

Actual Behavior

Dragging does not work. It works when I drag on a slide and move the mouse outside of the iframe.

*Edit: Example works now

[nolimits4web]

This is how iFrame works, there is no good way to detect that mouse went out of iframe

[dmaus]

Hey Vladimir.
I found out that with one small change, it works perfectly. In the attachEvents function i added the touchEvents.move and touchEvents.end listener to the target, not on the document (like the touchEvents.start event):

function attachEvents() {
...
// Touch Events
  {
    if (!Support.touch && (Support.pointerEvents || Support.prefixedPointerEvents)) {
      target.addEventListener(touchEvents.start, swiper.onTouchStart, false);
      target.addEventListener(touchEvents.move, swiper.onTouchMove, capture);  //changed from doc.addEventListener
      target.addEventListener(touchEvents.end, swiper.onTouchEnd, false); //changed from doc.addEventListener
    } else {
...
}

Is there any particular reason it is attached to the document?

[nolimits4web]

Yes, in case you attach it not to document you will bad behavior when it runs not in iframe

[dmaus]

Ok thanks for the fast answer.
But what you think about something like this?

  function inIframe () {
      try {
          return window.self !== window.top;
      } catch (e) {
          return true;
      }
  }
  
  if(inIframe){
    doc = target.ownerDocument;
  }
  ...
  // Touch Events
  {
    if (!Support.touch && (Support.pointerEvents || Support.prefixedPointerEvents)) {
      target.addEventListener(touchEvents.start, swiper.onTouchStart, false);
      doc.addEventListener(touchEvents.move, swiper.onTouchMove, capture);  
      doc.addEventListener(touchEvents.end, swiper.onTouchEnd, false); 
    } else {
  ...

So when the swiper target is in an iframe, it uses the document of the iframe instead of the root document. It works in my test in both cases (inside and outside iframe).
Only thing where it will not perform well is when the slider insider the iframe is fullscreen and the mouse moves outside of the iframe (like in my example now: https://dmaus.github.io/Swiper-iframe/).