iframe 阻止 iScroll 在移动 Safari 上滚动答案

【问题标题】：iframe prevents iScroll scrolling on mobile Safariiframe 阻止 iScroll 在移动 Safari 上滚动
【发布时间】：2013-02-21 08:09:15
【问题描述】：

我在我的移动启用网站（此处使用 iPhone）上使用 iScroll 在 div 内滚动。

在这个 div 中，我有一个固定高度的 iframe，如下所示：

<body>
  <div id="iscroller">
    <iframe id="theIframe"></iframe>
    Other stuff
  </div>
</body>

现在，在 div 内滚动时，一切正常，但当滚动手势从 iframe 开始时，我无法滚动。

问题在这里描述得很好：https://github.com/cubiq/iscroll/issues/41

因此，我通过将pointer-events:none 应用于 iframe 来使用该帖子中的 css 解决方法。

现在滚动效果很好但是我无法单击 iframe 中定义的任何链接，因为 iframe 上的所有点击/触摸事件似乎都因pointer-events: none 而被阻止。

所以，我想：

“好的，当用户滚动时，我需要pointer-events:none。如果他是不滚动（而是点击），我必须设置pointer-events:auto 为了让点击/触摸事件通过。”

所以我这样做了：

CSS

#theIframe{pointer-events:none}

JavaScript

$("#theIframe").bind("touchstart", function(){
  // Enable click before click is triggered
  $(this).css("pointer-events", "auto");
});

$("#theIframe").bind("touchmove", function(){
  // Disable click/touch events while scrolling
  $(this).css("pointer-events", "none");
});

即使添加这个也不起作用：

$("#theIframe").bind("touchend", function(){
  // Re-enable click/touch events after releasing
  $(this).css("pointer-events", "auto");
});

无论我做什么：滚动不起作用或单击 iframe 内的链接不起作用。

不起作用。有什么想法吗？

【问题讨论】：

标签： ios html iframe scroll iscroll

【解决方案1】：

我找到了完美的解决方案。在 iOS 和 Android 上运行良好。

基本思想是在 iframe 之上放置一个 div 层。这样滚动就很顺畅了。

如果用户想要点击/单击该 iframe 上的元素，我只需在图层上捕获该点击，保存 x 和 y 坐标并在这些坐标处触发 iframe 内容的点击事件：

HTML：

<div id="wrapper">
    <div id="layer"></div>
    <iframe id="theIframe"></iframe>
</div>
Other stuff

CSS：

#layer{
    position:absolute;
    opacity:0;
    width:100%;
    height:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:2
}

JavaScript：

$('#layer').click(function(event){
    var iframe = $('#theIframe').get(0);
    var iframeDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

    // Find click position (coordinates)
    var x = event.offsetX;
    var y = event.offsetY;

    // Trigger click inside iframe
    var link = iframeDoc.elementFromPoint(x, y);
    var newEvent = iframeDoc.createEvent('HTMLEvents');
    newEvent.initEvent('click', true, true);
    link.dispatchEvent(newEvent);
});

【讨论】：

没有其他方法可以做到这一点吗？这是一个聪明的方法，但我无法控制 iframe，如果它确实改变了我，谢谢队友:)
@jycr753 如果您的用户不需要点击 iframe 内的链接，您可以改用 css 属性 pointer-events:none。
如果用户需要能够在 iFrame 中滑动或捏合怎么办？
@SimonArnold 好吧，在 iframe 内它可以工作，但所有触摸事件都被“吸入”到 iframe 中，所以如果您希望触摸事件（如滑动和东西）在 iframe 之外触发（喜欢在它上面），它不会工作。
谢谢谢谢谢谢！这是一种 hack，但它是我发现的唯一一种适用于这种情况的方法。 @jycr753 你不需要控制 iframe 的内容来使用这个解决方案。

【解决方案2】：

我找到了一个解决方案，它恰好与其他人在 github 上已经提到的内容很接近，但这对于想要快速解决这个问题的人来说可能很有用。

我假设一些事情，比如只有一个 iscroll 容器，这里表示为 ID。这没有经过适当的测试，需要重构。它在我的项目中工作，但我在这里稍微改变了它的例子，但我想你会很容易理解你需要做什么：

var $iscroll = $('#iscroll');

document.addEventListener('touchstart', function(e) {

if ($iscroll.find('iframe').length > 0){

    $.each($iscroll.find('iframe'), function(k,v){

        var $parent = $(v).parent().first();

        if ($parent.find('.preventTouch').length == 0){

            $('<div class="preventTouch" style="position:absolute; z-index:2; width:100%; height:100%;"></div>')
                .prependTo($parent);

        };

        $parent
            .css('position', 'relative').css('z-index', 1);

    });

    $iscroll.find('.preventTouch').on('click', function(e){
        e.preventDefault();
        e.stopPropagation();
        return false;
    });

};

};

document.addEventListener('touchend', function(e) {

if ($iscroll.find('iframe').length > 0){

    setTimeout(function(){

        var $iscroll = $('#iscroll');

        $iscroll.find('.preventTouch').remove();
        $iscroll.find('iframe').css('z-index', '');
        $iscroll.find('.preventTouch').off('click');

    }, 400);

};

};

感谢收看！

【讨论】：