移动端浏览器JavaScript代码无法运行但桌面端正常的问题求助

我最近碰到个棘手的问题：下面这段代码在Chrome、Edge这类桌面浏览器里跑起来完全没问题，但放到安卓和iOS的移动端浏览器上，页面直接一片空白，根本加载不出来。

我的场景是把网站作为静态页面部署在S3上，代码的核心逻辑是：通过IP地址获取用户的经纬度，再调用反向地理编码接口拿到详细地址信息，最后通过AWS Lambda的函数URL把数据同步到DynamoDB里。

之前我只写了模态框相关的代码时，移动端和桌面端都能正常工作，现在加上地理位置上报的逻辑就直接崩了。我怀疑是不是两次监听DOMContentLoaded事件导致的冲突？或者还有什么我没考虑到的细节？有没有大佬能给点排查方向？

HTML代码 #

<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>
<body>
  <div class="modal fade" id="load-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="text-center">
          ...
        </div>
      </div>
    </div>
  </div>
</body>
</html>

JavaScript代码 #

const myModal = new bootstrap.Modal('#load-modal');

window.addEventListener('DOMContentLoaded', function() {
  myModal.show();
});

document.addEventListener("DOMContentLoaded", function() {
  // Fetch latitude and longitude based on IP address
  fetch("https://ipapi.co/json")
    .then(response => response.json())
    .then(data => {
      console.log(data.latitude)
      console.log(data.longitude)
      const bdcAPI = `https://api-bdc.net/data/reverse-geocode-client?
                // latitude=${data.latitude}&
                // longitude=${data.longitude}`
      getAPI(bdcAPI)
    })
    .catch(error => {
      console.error("Error fetching IP address:", error);
    });
});

function getAPI(bdcAPI) {
  fetch(bdcAPI)
    .then(response => response.json())
    .then(data => {
      console.log(data.countryName)
      console.log(data.city)

      functionURL(data.continentCode, data.continent, data.countryCode,
        data.countryName, data.principalSubdivisionCode, data.principalSubdivision, data.city, data.locality)
    })
    .catch(error => {
      console.error("Error fetching country and city name", error);
    });
}

function functionURL(continentCode, continent, countryCode, countryName,
  principalSubdivisionCode, principalSubdivision, city, locality) {

  const functionurl = `aws lambda function url`

  console.log(functionurl)

  fetch(functionurl)
    .then(response => response.json())
    .then(data => {
      console.log('Location logged successfully!!')
    })
    .catch(error => {
      console.error("Error calling function url:", error);
    });
}

备注：内容来源于stack exchange，提问作者Arun