iFrame中的觸摸事件在iOS上不起作用

當連接到iOS設備上的IFrame內的窗口時，不會觸發類似touchstart或touchend的觸摸事件。iFrame中的觸摸事件在iOS上不起作用

這裏是一個非常簡單的例子：

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>

我發現關於在iOS版內滾動發出多個問題IFrames和一些關於事件，但似乎沒有一個有效的解決方案我現在正在經歷的問題。

我創建了一個CodePen和一個JSFiddle供大家玩，因爲它們都執行IFrame內的代碼，所以顯示完全相同的行爲。

來源

2017-01-26 suamikim

添加以下CSS iframe內容（在我的例子child.html以上）解決了這個問題對我來說：

html, body { 
    touch-action: auto; 
}

來源

2017-01-29 16:38:33 suamikim

iFrame中的觸摸事件在iOS上不起作用

回答

相關問題