javascript - DOMContentLoaded 在 IOS Safari 上不会触发

Question

首先:我是一般编码新手。我三个月前才开始。

我正在为 friend 建立一个网站。它的导航栏应该响应地改变它的 html 内容，这在我测试的每台设备上都可以正常工作。但是当我尝试使用 DOMContentLoaded 设置 nav-ul 的innerHtml 时，出现了问题，但仅限于 IOS Safari。 不幸的是，我无法在 ios safari 上使用任何浏览器开发人员工具。

这是我的 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>`
   }
});

我是否因为必须提及一些异步内容而错过了一些等待内容？

感谢您的帮助!

Answer 1

您可以在该回调中记录 document.readyState 吗？如果不是loading，则表示事件在注册事件监听器之前触发。

更多信息请参见:https://developer.apple.com/forums/thread/651215