1

TL; 博士

我的 HTML/CSS/JS Web 应用程序在我的所有 Android 设备和笔记本电脑浏览器上都能完美运行，但在 iOS 上的 Safari 中却不行。相反，地图不会加载，也不会应用点击侦听器。似乎 Javascript 仅部分加载，但这很荒谬。

为什么 iOS Safari 似乎只加载了我的脚本的一半？

你自己看！在我的 GitHub 站点上查看演示。

我知道根据社区准则这是一个不好的问题，但我只是不知道要问什么问题。没有控制台错误要跟进，完全没有线索。

背景

我正在开发一个名为 Bike Share Explorer 的小应用程序。这是一个使用 Mapbox GL JS 和 Google MDL 的网络应用程序。该网络地图可让人们探索自行车共享系统和这些系统中的自行车可用性。

碎片

我正在使用 browserify 将 Mapbox GL JS 和我需要的其他代码与我的页面的 Javascript 捆绑在一起。该应用程序是为在 Express 服务器上运行而构建的，前端是使用 Pug 编写的，但是无论我是使用 Express 服务还是从文件系统服务，一切都可以在我的计算机上正常运行。

我试过的

根据各种 SO 帖子和博客，我...

  • 确保使用 HTTP 1.1 版
  • 确保我的标题包含Content-Type: text/html
  • 使用cors在我的测试服务器上设置 CORS （真的，我尝试了所有我能想到的东西）
  • 尝试将身体包裹在一个<div onclick="void(0)">（查看更多）
  • 尝试将光标更改为指针（在 body 元素上完成）
  • 尝试使用touchstart而不是click

我在几个设备上使用 BrowserSync 测试了所有这些方法。除了 iPhone，一切都很好。

然后我转而进行一些调试，alert以尝试查看实际运行的代码。从那我可以说我的脚本正在执行，并且 Mapbox GL JS 说它是受支持的，但是当我把它放在alert里面时map.on("load", () => {});，它从来没有在 iOS Safari 上触发。如果您在另一台设备上访问该网站，您会注意到它确实会在该设备上触发。

我希望我有一个更具体的问题要问，但我没有。

为什么 iOS Safari 似乎只加载了我的脚本的一半？

4

2 回答 2

1

对于后来发现这一点的任何人，卢卡斯发现了我看不到的异常，并最终引导我找到了答案。

HTMLCollections类似于数组，但不是数组。因此，您不能for ... of在它们上使用（至少在 Safari 中？它在 Chrome 和 Firefox 中有效）。相反，您可以这样做：

const theElements = Array.from(document.getElementsByClassName("selected"));

或查看这篇文章以获得更多解释/选项。

于 2017-03-23T13:19:33.440 回答
0

据我所知，该页面无法在 iOS 上运行，因为正在引发异常

TypeError: btn of centerMapButtons is not a function. (In 'btn of centerMapButtons', 'btn of centerMapButtons' is undefined)

centerMapButtons不实现迭代协议，因此不能在for...of循环中使用。

于 2017-03-22T17:05:15.043 回答