Javascript 的部分内容无法使用，但仅适用于 iOS Safari
Parts of Javascript don't work, but only on iOS Safari
TL;博士
我的 HTML/CSS/JS 网络应用程序在我的所有 Android 设备和我的笔记本电脑浏览器中运行良好，但在 iOS 上的 Safari 中运行不佳。相反，地图不会加载，也不会应用点击侦听器。 Javascript 似乎只加载了部分内容，但这太荒谬了。
为什么 iOS Safari 似乎只加载了一半的脚本？
See for yourself! 在我的 GitHub 网站上查看演示。
根据社区准则，我知道这是一个糟糕的问题，但我只是不知道该问什么问题。没有要跟进的控制台错误，根本没有任何线索。
背景
我正在开发一个名为 Bike Share Explorer 的小应用程序。这是一个使用 Mapbox GL JS 和 Google MDL 的网络应用程序。此网络地图可让人们探索自行车共享系统和这些系统中的自行车可用性。
碎片
我正在使用 browserify 将 Mapbox GL JS 和我需要的其他代码与我页面的 Javascript 捆绑在一起。该应用程序是为 运行 在 Express 服务器上构建的，前端是使用 Pug 编写的，但无论我是使用 Express 还是从文件系统提供服务，一切都在我的计算机上运行良好。
我试过的
基于各种 SO 帖子和博客，我...
- 确保使用 HTTP 版本 1.1
- 确保我的 headers 包含
Content-Type: text/html
- 使用 cors 在我的测试服务器上设置 CORS（真的，我尝试了我能想到的一切）
- 尝试将 body 包装在
<div onclick="void(0)"> (see more) 中
- 尝试将光标更改为指针（在 body 元素上完成）
- 尝试使用
touchstart 而不是 click
我在多个设备上使用 BrowserSync 测试了所有这些方法。除 iPhone.
外，其他一切正常
然后我使用 alert 进行了一些调试，以尝试查看哪些代码实际上得到了 运行。由此我可以说我的脚本 is 正在执行，而 Mapbox GL JS 说它 is 受支持，但是当我把 alert 在 map.on("load", () => {}); 中它从未在 iOS Safari 上触发。如果您在另一台设备上访问该站点，您会注意到它 确实 在该设备上触发。
我希望我有一个更具体的问题要问，但我没有。
为什么 iOS Safari 似乎只加载了一半的脚本？
据我所知，该页面无法在 iOS 上运行，因为抛出了异常
TypeError: btn of centerMapButtons is not a function. (In 'btn of centerMapButtons', 'btn of centerMapButtons' is undefined)
centerMapButtons 没有实现 iteration protocol，因此不能在 for...of 循环中使用。
对于后来发现此问题的任何人， 发现了我看不到的异常并最终引导我找到了答案。
HTMLCollections 类似于数组，但不是数组。因此，您不能对它们使用 for ... of（至少在 Safari 中是这样？它在 Chrome 和 Firefox 中有效）。相反，您可以这样做：
const theElements = Array.from(document.getElementsByClassName("selected"));
或参阅 this article 了解更多 explanation/options。
TL;博士
我的 HTML/CSS/JS 网络应用程序在我的所有 Android 设备和我的笔记本电脑浏览器中运行良好，但在 iOS 上的 Safari 中运行不佳。相反，地图不会加载，也不会应用点击侦听器。 Javascript 似乎只加载了部分内容，但这太荒谬了。
为什么 iOS Safari 似乎只加载了一半的脚本？
See for yourself! 在我的 GitHub 网站上查看演示。
根据社区准则，我知道这是一个糟糕的问题，但我只是不知道该问什么问题。没有要跟进的控制台错误，根本没有任何线索。
背景
我正在开发一个名为 Bike Share Explorer 的小应用程序。这是一个使用 Mapbox GL JS 和 Google MDL 的网络应用程序。此网络地图可让人们探索自行车共享系统和这些系统中的自行车可用性。
碎片
我正在使用 browserify 将 Mapbox GL JS 和我需要的其他代码与我页面的 Javascript 捆绑在一起。该应用程序是为 运行 在 Express 服务器上构建的，前端是使用 Pug 编写的，但无论我是使用 Express 还是从文件系统提供服务，一切都在我的计算机上运行良好。
我试过的
基于各种 SO 帖子和博客，我...
- 确保使用 HTTP 版本 1.1
- 确保我的 headers 包含
Content-Type: text/html - 使用 cors 在我的测试服务器上设置 CORS（真的，我尝试了我能想到的一切）
- 尝试将 body 包装在
<div onclick="void(0)">(see more) 中
- 尝试将光标更改为指针（在 body 元素上完成）
- 尝试使用
touchstart而不是click
我在多个设备上使用 BrowserSync 测试了所有这些方法。除 iPhone.
外，其他一切正常然后我使用 alert 进行了一些调试，以尝试查看哪些代码实际上得到了 运行。由此我可以说我的脚本 is 正在执行，而 Mapbox GL JS 说它 is 受支持，但是当我把 alert 在 map.on("load", () => {}); 中它从未在 iOS Safari 上触发。如果您在另一台设备上访问该站点，您会注意到它 确实 在该设备上触发。
我希望我有一个更具体的问题要问，但我没有。
为什么 iOS Safari 似乎只加载了一半的脚本？
据我所知，该页面无法在 iOS 上运行，因为抛出了异常
TypeError: btn of centerMapButtons is not a function. (In 'btn of centerMapButtons', 'btn of centerMapButtons' is undefined)
centerMapButtons 没有实现 iteration protocol，因此不能在 for...of 循环中使用。
对于后来发现此问题的任何人，
HTMLCollections 类似于数组，但不是数组。因此，您不能对它们使用 for ... of（至少在 Safari 中是这样？它在 Chrome 和 Firefox 中有效）。相反，您可以这样做：
const theElements = Array.from(document.getElementsByClassName("selected"));
或参阅 this article 了解更多 explanation/options。