L'iframe enfant ne reçoit pas les événements tactiles

Question

J'ai un code comme suit;

<div id="scroller" style="width: 50%; overflow: auto;"> 
      <iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="responses.html" /> 
     </div> 

Maintenant, je veux la table de données iframe pour faire défiler la page principale sur l'iPad ..

J'ai utilisé un js sur la page iframe pour écouter les événements tactiles touchstart, touchmove, etc

Mais pour certaines raisons, ces événements ne se produisent jamais sur l'iPad ..

J'ai également essayé cela;

var startY = 0; 
    var startX = 0; 
    document.addEventListener("touchstart", function (event) { 
    alert(11); 
     parent.window.scrollTo(0, 1); 
     startY = event.targetTouches[0].pageY; 
     startX = event.targetTouches[0].pageX; 
    }); 
    document.addEventListener("touchmove", function (event) { 
     event.preventDefault(); 
     var posy = event.targetTouches[0].pageY; 
     var h = parent.document.getElementById("scroller"); 
     var sty = h.scrollTop; 
     var posx = event.targetTouches[0].pageX; 
     var stx = h.scrollLeft; 
     h.scrollTop = sty - (posy - startY); 
     h.scrollLeft = stx - (posx - startX); 
     startY = posy; 
     startX = posx; 
    }); 

Pourriez-vous s'il vous plaît aidez-moi. Merci ...

Answer 1

1) Retirez l'étiquette id double de l'iframe:

<iframe height="100%" id="iframe" scrolling="no" width="100%" src="responses.html" /> 

2) ajouter à votre css:

#scroller { 
z-index:-1; 
} 

#iframe { 
z-index:1; 
} 

et voir si cela a un effet . Si ce n'est pas le cas, vous pouvez toujours utiliser AJAX.

Assurez-vous que jquery est inclus sur la page, puis:

<script>  
$.ajax({ 
     url: "responses.html", 
     cache: false, 
     success: function(html){ 
     $("#results").append(html); 
     } 
    }); 
</script> 

<div id="results" height="100%" width="100%"></div>