Menu
Touch events like touchstart or touchend are not fired when attached to the window inside an IFrame on iOS devices.
Here's a very simple example:
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>
I've found multiple questions regarding scroll issues on iOS within IFrames and some regarding events, but none seems to have a valid solution for the issue I'm experiencing right now.
I've created a CodePen and a JSFiddle for everyone to play around which show the exact same behavior since both execute the code within an IFrame.
773
Safari mobile doesn't support touch events. We have tried to fix it with mouse events as it was written in the apple documentation but had no success.
Touch events are supported by Chrome and Firefox on desktop, and by Safari on iOS and Chrome and the Android browser on Android, as well as other mobile browsers like the Blackberry browser.
Because mobile browsers should also work with with web applications that were build for mouse devices, touch devices also fire classic mouse events like mousedown or click . When a user follows a link on a touch device, the following events will be fired in sequence: touchstart.
Touch events consist of three interfaces ( Touch , TouchEvent and TouchList ) and the following event types: touchstart - fired when a touch point is placed on the touch surface. touchmove - fired when a touch point is moved along the touch surface. touchend - fired when a touch point is removed from the touch surface.
Solution 1: Inside the iframe, add a dummy listener to the document object:
document.addEventListener('touchstart', {}); // in iframe
It seems Safari on IOS denies touch listeners to window unless other DOM objects also have listeners.
Solution 2: Inside the top window, add a dummy listener to any object (including window):
window.addEventListener('touchstart', {}); // in top window
It seems Safari on IOS denies touch listeners to window in iframes unless the parent also has listeners.
Either of the above solutions works (they're not both needed, only one). Tested on:
86
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
