Извините за длинный заголовок. Кнопка «запускать демонстрационный модем» в «клике» открывает модальный, который загружает iframe из другого домена. Сайт iframe - это просто изображение, обернутое в тег привязки с 'mailto:' href.iOS safari заставляет пользователя щелкнуть и удерживать, а не просто щелкнуть, чтобы открыть ссылку внутри iframe, загруженного в модальный
загрузка iframe через jQuery.
Этот поток хорошо работает на настольных компьютерах и в устройствах Android (версия 4-6 проверена до сих пор).
В iOS большую часть времени Chrome быстро загружает ссылку mailto без проблем после того, как пользователь нажимает на изображение.
В Safari, однако, «tap» игнорируется, и только когда пользователь коснется и удерживает изображение, сафари откроет диалоговое окно с просьбой «открыть сообщение».
Неужели кто-нибудь сталкивался с этим раньше? Это не проблема при загрузке iframe непосредственно в div. Кажется, это происходит только при загрузке в модальный, который скрыт при загрузке страницы.
Вы можете проверить на IOS Safari здесь:
https://valuer-fox-52454.netlify.com/
из исследования в Интернете я реализованный:
'сенсорного действия: манипуляция;' правила как для родительских, так и для дочерних страниц.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> на родительской странице
Я добавил «touchstart touchend водопроводной фокус» к защелкиванию четной функции.
добавил событие onclick к тегу привязки и попытался использовать jQuery для связи.
Изображение сопоставлено с областью с кликом, а не с оберткой изображения в привязном теге.
Ничто из перечисленного не повлияло на поведение сафари iOS.
Поскольку я не могу найти что-либо, специально связанное с iOS, переопределяющим события касания, когда в iframe и/или при загрузке в модальный, я решил, что я проверил бы здесь.
Спасибо за любую помощь.
Это родительская страница:
<!doctype html>
<html>
<head>
<title>Bootstrap - Modals (test)</title>
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
body {font-family: Arial, sans-serif;}
.errors {display: none;}
.errors h2 {color: red;}
.coupon {width: 100%; height: 500px; border: 1px solid #ccc;}
.coupon iframe {width: 100%; height: 100%; overflow: scroll;}
ol li {margin: 1em 0; line-height: 1.5em;}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>
<!-- Button trigger modal -->
<button id="getCoupon" type="button" class="btn btn-primary btn- lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
</p>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<h2>Your coupon is below!</h2>
<div class='coupon' id='mydiv'></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src='https://code.jquery.com/jquery-3.1.1.js'></script>
<script>
$(document).ready(function(){
$("#getCoupon").on("click", function(){
var rtxURL = "https://childinmodaltest.herokuapp.com/index.html";
if (!$('iframe[src="'+ rtxURL +'"]').length > 0) {
var iframe = document.createElement('iframe');
iframe.src = rtxURL;
$(iframe).prop({
'scrolling': 'no',
'marginwidth': '0',
'marginheight': '0',
'hspace': '0',
'vspace': '0',
'frameborder': '0',
'allowtransparency': 'true'
}).css('min-height', '640px');
setTimeout(function(){
$('#mydiv').append(iframe);
}, 333)
}
});
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Это ребенок страница
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>child page to be loaded into modal</title>
<style>
body {text-align: center;}
img { width: 100%; height: auto; }
</style>
</head>
<body>
<a href="mailto:[email protected]" target="_blank">
<img src='https://lh3.ggpht.com/vqKa5XeIG6W51gLV-wG_-DfX20FJxGxOw4-AoDQOJAzCqFeoED50-gabK94PFnWbHf8=w300' alt="click me button" />
</a>
</body>
</html>