子 iframe 未接收到触摸事件答案

【问题标题】：Child iframe not receiving touch events子 iframe 未接收到触摸事件
【发布时间】：2011-05-26 13:30:20
【问题描述】：

我有一个代码如下；

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

你能帮帮我吗？谢谢...

【问题讨论】：

请提出一些建议..如果不是确切的解决方案..至少有一些方向..
在主页上使用这个javascript有效吗？如果是，也许您可以更改代码，以便使用 ajax 调用加载response.html（或该页面的“正文”内容）？然后您将直接插入到scroller 的响应。所以基本上.. iframe 是必须的吗？
不应该 IFRAME 能够在没有任何脚本的情况下滚动吗？尝试触摸框架内的任意位置以使其聚焦，然后尝试滚动。
这就是这个问题的重点.. ios 4.3 上的 safari 本身不支持 iframe 滚动..

标签： javascript html ipad safari webkit

【解决方案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>

【讨论】：