时间戳

首页 > 解决方案 > iOS 设备上的 Google 地图 iframe 烦人的错误。如何绕过它？

ios - iOS 设备上的 Google 地图 iframe 烦人的错误。如何绕过它？

问题描述

在运行 iOS12、chrome 和 safari 的 iPhone 和 iPad 上测试

错误描述：在使用 chrome 或 safari 在 iOS 设备（在 iOS12 上测试）上与谷歌地图（通过 iframe 集成在网站中）进行交互（放大/缩小）后，单击地图外的链接没有任何作用。

在codepen上尝试一下

有趣的是，该错误不会在 jsfiddle 中发生

如果您没有 iOS 设备，这是我制作的youtube视频。

发生在我的网站上，这是一个带有谷歌地图 iframe 的普通 html 页面（没有添加其他 javascript、css 文件用于测试目的）：

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12101.03207249142!2d-74.04012067655368!3d40.690314788042684!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25090129c363d%3A0x40c6a5770d25022b!2sStatue+of+Liberty+National+Monument!5e0!3m2!1sen!2sus!4v1537933952825" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

上面的 iframe 是直接从谷歌地图“分享 > 嵌入地图”功能获得的。

任何线索如何解决这个错误？

标签： iosdictionaryiframe

解决方案

经过一番研究，我找到了一个可以正常工作的解决方案。

如果您将事件侦听器添加到正文，它将解决问题。

document.body.addEventListener("fooAction", function(e) {
    // something that does nothing
});

推荐阅读