Части Javascript не работают, но только в iOS Safari

TL; DR

Мое веб-приложение HTML/CSS/JS отлично работает на всех моих устройствах Android и в браузере моего ноутбука, но не в Safari на iOS. Вместо этого карта не загружается, и прослушиватели кликов не применяются. Кажется, что Javascript загружается только частично, но это смешно.

Почему iOS Safari загружает только половину моего скрипта?

Убедитесь сами! Посмотрите демоверсию на моем сайте GitHub.

Я знаю, что это плохой вопрос по правилам сообщества, но я просто не знаю, какой вопрос задать. Никаких консольных ошибок, за которыми нужно следить, вообще никаких подсказок.

Фон

Я работаю над небольшим приложением, которое я называю Bike Share Explorer. Это веб-приложение, использующее Mapbox GL JS и Google MDL. Эта веб-карта позволяет людям исследовать системы проката велосипедов и доступность велосипедов в этих системах.

Кусочки

Я использую браузер, чтобы связать Mapbox GL JS и другой код, который мне нужен, с Javascript для моей страницы. Приложение создано для работы на сервере Express, а передняя часть написана с использованием Pug, но независимо от того, работаю ли я с Express или из файловой системы, на моем компьютере все работает отлично.

Что я пробовал

Основываясь на различных сообщениях и блогах SO, я...

Я протестировал все эти методы с помощью BrowserSync на нескольких устройствах. Все работало нормально, кроме айфона.

Затем я приступил к небольшой отладке с помощью alert, чтобы посмотреть, какой код на самом деле запускается. Исходя из этого, я могу сказать, что мой скрипт выполняется, и Mapbox GL JS говорит, что он поддерживается, но когда я помещаю alert внутрь map.on("load", () => {});, он никогда не запускается в iOS Safari. Если вы посетили сайт на другом устройстве, вы заметите, что он действительно срабатывает на нем.

Хотелось бы задать более конкретный вопрос, но нет.

Почему iOS Safari загружает только половину моего скрипта?


ios iphone javascript safari htmlcollection
person nronnei    schedule 22.03.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Насколько я могу судить, страница не работает на iOS, потому что выдается исключение

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

centerMapButtons не реализует протокол итерации и поэтому не может использоваться в цикле for...of.

person Lucas Wojciechowski    schedule 22.03.2017
comment
Спасибо большое за вашу помощь. Как вы нашли это исключение, используя Safari на ноутбуке? Я не мог заставить Chrome или Firefox выгнать его. Мой объект — это HTMLCollection, поэтому он не будет работать с for ... of, потому что это массивоподобный объект, а не массив? - person nronnei; 23.03.2017
comment
Существует способ отладки iOS Safari на рабочем столе: developer.apple.com/library/content/documentation/ - person Lucas Wojciechowski; 24.03.2017

arrow_upward
1
arrow_downward

Для тех, кто найдет это позже, Лукас нашел исключение, которое я не мог увидеть, и в конечном итоге привел меня к ответу.

HTMLCollections похожи на массивы, но не являются массивами. Следовательно, вы не можете использовать на них for ... of (по крайней мере, в Safari? Это работало в Chrome и Firefox). Вместо этого вы можете сделать:

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

Или см. эту статью для получения дополнительных объяснений/вариантов. .

person nronnei    schedule 23.03.2017