子 iframe 未接收到触摸事件

Question

我有如下代码；

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

现在我希望 iframe 数据表在 iPad 的主页内滚动。

我在 iframe 页面上使用了一个 js 来监听触摸事件 touchstart、touchmove 等

但由于某些原因，这些事件永远不会在 iPad 上触发。

我也试过这个；

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

请你帮助我好吗。 谢谢...

Answer 1

1）从iframe中取出重复的id标签：

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

2）将此添加到您的 css 中：

#scroller {
z-index:-1;
}

#iframe {
z-index:1;
}

看看有没有效果。 如果不是，您始终可以使用 AJAX。

确保页面中包含 jquery，然后：

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

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