iOS safari强制用户单击并按住，而不是单击以打开模式加载的iframe内的链接
抱歉，标题太长了。“点击”上的“启动演示模式”按钮打开一个模式，它从另一个域加载一个iframe。iframe站点只是一个包含'mailto:‘href的锚标签中的图片。
iframe通过jQuery加载。
这个流程在桌面、跨浏览器和Android设备上都能很好地工作(到目前为止测试的版本是v4-6)。
在iOS中，大多数时候，在用户点击图片后，Chrome会迅速加载邮件链接，而不会出现问题。
然而，在Safari中，‘点击’被忽略，只有当用户触摸并持有图像时，safari才会打开一个对话框，要求用户“打开消息”。
以前有没有人遇到过这种情况？如果将iframe直接加载到div中，这不是问题。这似乎只有在加载到模式时才会发生，而模式在页面加载时是隐藏的。
你可以在这里测试iOS Safari：
https://valuer-fox-52454.netlify.com/
通过在线研究，我实现了：
‘’touch action: manipulation;‘规则同时适用于父页面和子页面。
父页面上的<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
我已经添加了'touchstart，touchend，tap focus‘到'click’even功能中。
将onclick事件添加到锚定标记，并尝试使用jQuery链接。
图像映射了可单击区域，而不是将图像包装在锚点标记中。
以上这些都不会影响iOS safari的行为。
由于在iframe中和/或加载到模式中时，我找不到任何与iOS覆盖触摸事件相关的东西，所以我想我应该在这里检查一下。
谢谢你的帮助。
这是父页面：
<!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:test@example.com" target="_blank">
<img src='https://lh3.ggpht.com/vqKa5XeIG6W51gLV-wG_-DfX20FJxGxOw4-AoDQOJAzCqFeoED50-gabK94PFnWbHf8=w300' alt="click me button" />
</a>
</body>
</html>回答 1
Stack Overflow用户
发布于 2017-02-24 06:29:56
如果有人遇到这个问题，我的解决办法是使用postMessage从iframe通信到父页面，并告诉它在点击事件上重定向。
https://stackoverflow.com/questions/41900959
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号