Javascript的某些部分不起作用，但仅适用于iOS Safari

Question

TL; DR

我的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
• 确保我的标题包含Content-Type: text/html
• 使用cors在我的测试服务器上设置CORS（真的，我尝试了我能想到的一切）
• 尝试用<div onclick="void(0)">（see more）
包裹身体
• 尝试将光标更改为指针（在body元素上完成）
• 尝试使用touchstart代替click

我在几台设备上使用BrowserSync测试了所有这些方法。除了iPhone之外，一切正常。

然后我转向使用alert进行一些调试，以尝试查看实际运行的代码。从那里我可以说我的脚本正在执行，并且Mapbox GL JS说它支持 ，但当我将alert放在map.on("load", () => {});内时它永远不会在iOS Safari上被解雇。如果您在其他设备上访问过该网站，则会注意到该网站 。

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

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

Answer 1

我可以说，该页面不适用于iOS，因为正在抛出异常

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

centerMapButtons未实现iteration protocol，因此无法在for...of循环中使用。

Answer 2

对于后来发现此问题的人，Lucas发现了我无法看到的异常，最终导致我得到了答案。

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

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

或者查看this article了解更多说明/选项。