iFrame 中的触摸事件在 iOS 上不起作用答案

【问题标题】：Touch events within iFrame are not working on iOSiFrame 中的触摸事件在 iOS 上不起作用
【发布时间】：2017-06-11 16:02:10
【问题描述】：

touchstart 或 touchend 等触摸事件在 iOS 设备上附加到 IFrame 内的窗口时不会触发。

这是一个非常简单的例子：

parent.html

<!DOCTYPE HTML>
<html style="height: 100%;">
<head>
    <meta charset="UTF-8">
    <title>Touch Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="height: 100%; margin: 0; overflow: hidden;">
    <iframe style="width: 100%; height: 100%; border: none;" src="child.html"></iframe>
</body>
</html>

child.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Touch Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>    
        body {
            margin: 0;
            padding: 8px;
        }

        div.header {
            margin-bottom: 8px;
        }

        div.text-entry {
            font: 300 1rem/1.25 'Open Sans', 'Helvetica Neue', helvetica, arial, sans-serif;
            color: rgb(64, 64, 64);
        }
    </style>

    <script>
        window.onload = function() {
            function addEvent(event) {
                var div = document.createElement('div');

                div.className = 'text-entry';
                div.textContent = new Date().toLocaleTimeString() + ' Event "' + event.type + '" detected';
                document.body.appendChild(div);
            }

            window.addEventListener('touchstart', addEvent.bind(null), false);
            window.addEventListener('touchend',   addEvent.bind(null), false);
        }
    </script>
</head>
<body>
    <div class="text-entry header">Clicks/touches on the viewport should add some text entries...</div>
</body>
</html>

我发现了多个关于 IFrame 中 iOS 上的滚动问题的问题以及一些关于事件的问题，但似乎没有一个针对我现在遇到的问题的有效解决方案。

我创建了一个 CodePen 和一个 JSFiddle 供大家玩，它们显示完全相同的行为，因为它们都在 IFrame 中执行代码。

【问题讨论】：

标签： javascript ios iframe touch-event

【解决方案1】：

将以下 CSS 添加到 IFrame 内容（上面示例中的 child.html）解决了我的问题：

html, body {
    touch-action: auto;
}

【讨论】：

这对我不起作用，但@user844393 的回答确实如此。也许自 2017 年 1 月以来发生了一些变化？

【解决方案2】：

解决方案 1： 在 iframe 中，为 document 对象添加一个虚拟侦听器：

document.addEventListener('touchstart', {}); // in iframe

iOS 上的 Safari 似乎拒绝了 window 的触摸侦听器，除非其他 DOM 对象也有侦听器。

解决方案 2： 在顶部窗口内，为任何对象（包括 window）添加一个虚拟监听器：

window.addEventListener('touchstart', {}); // in top window

iOS 上的 Safari 似乎拒绝在 iframe 中对窗口进行触摸侦听器，除非父级也有侦听器。

上述任何一种解决方案都有效（它们不是都需要，只有一个）。测试日期：

Safari 9.0 / IOS：9.3.5
Safari 11.0 / IOS：11.3

【讨论】：

为我工作！！
如何在 iframe 中添加虚拟监听器。你能分享一下它在 iframe 中的样子吗？