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>

子iframe未接收触摸事件

1 个答案: