地理信息渲染溢出div容器问题求助

问题根源 #

1. DOM结构损坏原因：多次使用document.body.innerHTML +=拼接HTML时，浏览器每次都会重新解析整个body的HTML并自动修正DOM结构。当你第一次添加<div id="banner-message">时，浏览器会直接补全闭合标签</div>，后续的<p>和按钮自然就被放到了div外部。
2. jQuery事件失效原因：$(document).ready()执行时，地理定位的异步回调还没触发，#banner-message和按钮还未生成，导致事件绑定无法作用在目标元素上。
3. 脚本放header的适配问题：header中的脚本执行时，body还未加载完成，直接操作DOM或绑定元素会出现无效情况。

修复后的代码 #

1. JavaScript代码（可放在header中）

$(document).ready(function() {
  // 用事件委托绑定点击事件，适配后续生成的元素
  $(document).on("click", "#banner-message button", () => {
    $("#banner-message").toggleClass("alt");
  });
});

// 计算两点间距离
function distance(lon1, lat1, lon2, lat2) {
  var R = 6371; // 地球半径（km）
  var dLat = (lat2 - lat1).toRad();
  var dLon = (lon2 - lon1).toRad();
  var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
    Math.sin(dLon / 2) * Math.sin(dLon / 2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  var d = R * c; // 距离（km）
  return d;
}

// 给Number原型添加弧度转换方法
if (typeof(Number.prototype.toRad) === "undefined") {
  Number.prototype.toRad = function() {
    return this * Math.PI / 180;
  }
}

// 检查浏览器是否支持地理定位
if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(
    function(position) {
      let latitude = position.coords.latitude;
      let longitude = position.coords.longitude;
      let accuracy = position.coords.accuracy;
      const Afstand = distance(longitude, latitude, 9.418893232332728, 56.93058705206541);

      // 一次性拼接所有HTML内容，避免DOM结构被多次解析破坏
      let bannerHtml = `
        <div id="banner-message">
          <p>Geolocation test</p>
          <p>Latitude: ${latitude}</p>
          <p>Longitude: ${longitude}</p>
          <p>Accuracy indenfor: ${accuracy} meter</p>
          <p>Afstand: ${Math.round(Afstand * 1000)} meter</p>
          <button>Change coloring</button>
        </div>
      `;
      // 一次性插入到body末尾
      document.body.insertAdjacentHTML('beforeend', bannerHtml);

      // 可选：精度判断刷新逻辑
      /*
      if (Math.round(Afstand*1000) > 200) {
        setTimeout(() => location.reload(), 7000);
      }
      */
    },
    function(error) {
      console.error("Error getting location: " + error.message);
    }
  );
} else {
  alert("Geolocation is not supported by your browser");
}

2. CSS代码（保持不变）

body {
  background: #FFE0AF;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #F7F7F0;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #BAF1BE;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #FFBFBF;
  color: #000;
}

关键修改点 #

• 一次性拼接插入HTML：用模板字符串整合所有banner内容，通过insertAdjacentHTML一次性插入，避免浏览器多次解析DOM导致结构混乱。
• 事件委托绑定：jQuery通过$(document).on绑定事件，不管元素是提前存在还是后续生成，都能触发点击事件，完美适配脚本放在header的场景。
• 移除冗余代码：删掉重复的地理定位请求，减少不必要的资源消耗。
• 简化延时逻辑：用setTimeout替代Promise版sleep，代码更简洁高效。

内容的提问来源于stack exchange，提问作者Engberg