DOMContentLoaded 不会在 IOS Safari 上触发

Question

First of all: I'm new to coding in generel. i just started 3 months ago.

I'm setting up a website for a friend. The navbar of it should responsevely change it's html content what works fine on every device i tested. but when i try to set the innerHtml of my nav-ul with DOMContentLoaded, something goes wrong but only on the IOS Safari. unfortunately i can't use any browser developer tools on my ios safari.

Here is my app.js

document.addEventListener("DOMContentLoaded", function() {
const rect = document.querySelector(".main-container");
const screenWidth = rect.getBoundingClientRect().width;

if (screenWidth <= 800) {
    document.getElementById("navbar-list").innerHTML = `<li><a href="tel:xxxxx"><img src="./vector/phone1.png" alt="" class="icon"><p id="number">Anrufen</p></a></li><li><a href="whatsapp://send?text=Hallo! ich bin ein text der in einem whatsapp button programmiert ist auf peters website!&phone=xxxxx"><img src="./vector/icons8-whatsapp.svg" alt="" class="icon"><p>WhatsApp</p></a></li>`
} else {
    document.getElementById("navbar-list").innerHTML = `<li><a href="#home">Home</a></li><li><a href="#faecher">Fächer</a></li><li><a href="#konzept">Konzept</a></li><li><a href="#reviews">Ergebnisse</a></li><li><a href="#contact">Kontakt</a></li>`
}
});

Do i miss some await-stuff because i have to mention some async stuff?

Thanks for your help!

Answer 1

Can you log document.readyState inside of that callback? If it's not loading that means the event fired before the event listener was registered.

More here: https://developer.apple.com/forums/thread/651215