2017-01-26 11 views
0

Прикосновения к событиям типа touchstart или touchend не запускаются при подключении к окну внутри IFrame на устройствах iOS.События касания в 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> 

Я нашел несколько вопросов, касающихся вопросов прокрутки на прошивке в рамках IFrames и некоторые из них относятся к событиям, но ни один из них не имеет правильного решения для проблема, с которой я сейчас сталкиваюсь.

Я создал CodePen и JSFiddle для всех, чтобы играть вокруг, которые показывают то же самое поведение, поскольку оба выполняют код внутри IFrame.

ответ

0

Добавление следующий CSS к содержимому IFrame (child.html в моем примере выше) решается вопрос для меня:

html, body { 
    touch-action: auto; 
}