如何根据JavaScript所在页面在共享Div中显示对应文本？

我是新手，正在开发漫画布局脚本，希望在指定页面展示页面信息（章节编号、页码、章节标题等）。例如访客在漫画第二页时，希望显示：Chapter #01: The Start-Up | Page #02 - Comic #002 (Nov.28.2023)

对应的HTML结构如下：

<div id="comicInfo">
<div id="ch"></div>
<div id="pg"></div>
<div id="comno"></div>
</div>

我尝试了如下JavaScript代码，但完全无法运行，恳请帮助：

if (document.URL.includes("comics/page001.htm") ) {
document.getElementById("ch").innerHTML = "Chapter #01: The Start-Up";
document.getElementById("pg").innerHTML = "Page #01";
document.getElementById("comno").innerHTML = "Comic #001";

} else if (document.URL.includes("comics/page002.htm") ) {
document.getElementById("ch").innerHTML = "Chapter #01: The Start-Up";
document.getElementById("pg").innerHTML = "Page #02";
document.getElementById("comno").innerHTML = "Comic #002";

} else if (document.URL.includes("comics/page003.htm") ) {
document.getElementById("ch").innerHTML = "Chapter #01: The Start-Up";
document.getElementById("pg").innerHTML = "Page #03";
document.getElementById("comno").innerHTML = "Comic #003";
}

else (document.URL.includes("comics/page004.htm") ) {
document.getElementById("ch").innerHTML = "Chapter #01: The Start-Up";
document.getElementById("pg").innerHTML = "Page #04";
document.getElementById("comno").innerHTML = "Comic #004";
}

1. 原代码的核心错误 #

• 最后一行else后面加了条件判断，语法完全错误。else是兜底逻辑，不能带条件，要判断新条件必须用else if。
• 可能存在DOM加载顺序问题：如果JS代码写在HTML元素之前，执行时找不到#ch、#pg、#comno这些元素，直接报错。

2. 修正后的基础运行代码 #

先修复语法错误，同时确保DOM加载完成后再执行代码：

// 等待页面HTML加载完成后再执行脚本
document.addEventListener('DOMContentLoaded', function() {
  const currentUrl = document.URL;
  
  if (currentUrl.includes("comics/page001.htm")) {
    document.getElementById("ch").textContent = "Chapter #01: The Start-Up";
    document.getElementById("pg").textContent = "Page #01";
    document.getElementById("comno").textContent = "Comic #001 (Nov.28.2023)";
  } else if (currentUrl.includes("comics/page002.htm")) {
    document.getElementById("ch").textContent = "Chapter #01: The Start-Up";
    document.getElementById("pg").textContent = "Page #02";
    document.getElementById("comno").textContent = "Comic #002 (Nov.28.2023)";
  } else if (currentUrl.includes("comics/page003.htm")) {
    document.getElementById("ch").textContent = "Chapter #01: The Start-Up";
    document.getElementById("pg").textContent = "Page #03";
    document.getElementById("comno").textContent = "Comic #003 (Nov.28.2023)";
  } else if (currentUrl.includes("comics/page004.htm")) {
    document.getElementById("ch").textContent = "Chapter #01: The Start-Up";
    document.getElementById("pg").textContent = "Page #04";
    document.getElementById("comno").textContent = "Comic #004 (Nov.28.2023)";
  }
});

• 用DOMContentLoaded事件确保HTML元素加载完成后再执行JS，避免找不到元素的问题。
• 把innerHTML换成textContent，如果只是插入纯文本，textContent更安全，不会引入XSS风险。
• 补全了你示例中的日期信息。

3. 优化方案（适合多页面场景） #

如果后续要加很多页面，重复写else if会非常繁琐，可以用配置对象来统一管理页面信息，维护更方便：

document.addEventListener('DOMContentLoaded', function() {
  // 页面信息配置表，新增页面直接加在这里就行
  const pageConfigs = {
    "comics/page001.htm": {
      chapter: "Chapter #01: The Start-Up",
      page: "Page #01",
      comicNo: "Comic #001 (Nov.28.2023)"
    },
    "comics/page002.htm": {
      chapter: "Chapter #01: The Start-Up",
      page: "Page #02",
      comicNo: "Comic #002 (Nov.28.2023)"
    },
    "comics/page003.htm": {
      chapter: "Chapter #01: The Start-Up",
      page: "Page #03",
      comicNo: "Comic #003 (Nov.28.2023)"
    },
    "comics/page004.htm": {
      chapter: "Chapter #01: The Start-Up",
      page: "Page #04",
      comicNo: "Comic #004 (Nov.28.2023)"
    }
  };

  const currentUrl = document.URL;
  // 遍历配置表匹配当前页面
  for (const pagePath in pageConfigs) {
    if (currentUrl.includes(pagePath)) {
      const config = pageConfigs[pagePath];
      document.getElementById("ch").textContent = config.chapter;
      document.getElementById("pg").textContent = config.page;
      document.getElementById("comno").textContent = config.comicNo;
      break; // 匹配到后停止遍历，提升效率
    }
  }
});

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