CSS background-image无法填满body及JavaScript请求异常处理求助

问题原因 #

body元素默认高度由内部内容高度决定，当页面内容高度小于可视窗口高度时，body高度不足，导致background-size: cover只能覆盖body本身区域，无法铺满整个屏幕。

修复方案 #

给html和body元素设置最小高度为可视窗口高度，修改后的CSS代码如下：

/* 新增html标签样式 */
html {
  min-height: 100vh;
}
body {
  width: 100%;
  min-height: 100vh; /* 新增这行 */
  margin: 0;
  background-image: url("https://puzzenti.github.io/images/bg_test.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

实现思路 #

1. 先判断输入的modName是否为空，为空直接执行重置逻辑，不发起无用请求
2. 接口返回后先判断请求状态是否正常，再判断返回的data数组长度是否大于0、是否存在第一条数据
3. 将重复的重置逻辑抽为公共函数，减少冗余代码

修改后的完整代码 #

// 抽离公共重置逻辑
function resetModInfo() {
  document.getElementById("modThumb").src="https://puzzenti.github.io/images/placeholder.png";
  document.getElementById("modName").innerHTML = "";
  document.getElementById("modAuthor").innerHTML = "";
  document.getElementById("modLikes").innerHTML = "";
  document.getElementById("modUpdates").innerHTML = "";
  document.getElementById("infoContainer").style.display = "none";
  document.getElementById("downloadBtn").style.display = "none";
}

function getMod() {
  var modName = document.getElementById('myInput').value
  // 输入为空直接重置，不发请求
  if (modName === "") {
    resetModInfo();
    return;
  }
  var req = new XMLHttpRequest();

  req.onreadystatechange = function() {
    if (req.readyState === 4) {
      // 先判断接口请求是否成功
      if (req.status !== 200) {
        resetModInfo();
        return;
      }
      var response = req.responseText;
      var json = JSON.parse(response);
      // 新增判断：data为空或者没有第一条数据时执行重置
      if (!json.data || json.data.length === 0 || !json.data[0]) {
        resetModInfo();
        return;
      }
      // 原有正常逻辑不变
      var modID = String(json['data'][0]['mod_id']);
      var modName2 = String(json['data'][0]['mod_name']);
      var modAuthor = String(json['data'][0]['creatorname']);
      var modLikes = String(json['data'][0]['mod_votes']);
      var modUpdates = String(json['data'][0]['mod_updatecounter']);

      var modThumb = String("https://krunker-user-assets.nyc3.digitaloceanspaces.com/md" + modID + "/thumb.png");
      var modDownload = String("https://krunker-user-assets.nyc3.digitaloceanspaces.com/md" + modID + "/mod.zip");

      document.getElementById("modThumb").src=modThumb;
      document.getElementById("modName").innerHTML = String(modName2);
      document.getElementById("modAuthor").innerHTML = String(modAuthor);
      document.getElementById("modLikes").innerHTML = String(modLikes);
      document.getElementById("modUpdates").innerHTML = String(modUpdates);
      document.getElementById("infoContainer").style.display = "block";
      document.getElementById("downloadBtn").style.display = "block";

      var myBtn = document.getElementById('downloadBtn');
      // 先移除原有点击事件，避免重复绑定
      myBtn.removeEventListener('click', downloadMod);
      function downloadMod() {
        window.location.href = modDownload;
      }
      myBtn.addEventListener('click', downloadMod);
    }
  };

  req.open('GET', String("https://api.krunker.io/webhooks/general/mods/search?val=" + encodeURIComponent(modName)));
  req.send(null);
}

补充说明 #

• 新增了encodeURIComponent处理modName参数，避免搜索内容包含特殊字符时请求出错
• 新增了点击事件移除逻辑，避免多次调用函数时重复绑定点击事件，导致多次触发下载

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