如何获取用户点击跳转页面的body元素以注入自定义导航栏？

你遇到的核心问题是：点击<a>标签跳转后，原页面的JavaScript上下文会被销毁，无法直接访问新页面的DOM元素。要给所有跳转页面注入导航栏，最直接且可靠的方式是让每个目标页面自身加载并执行导航栏的创建逻辑，具体步骤如下：

1. 抽离导航栏代码到独立文件 #

把你的导航栏创建逻辑（createMyNavBar和setAttributes函数）单独保存为一个JS文件，比如nav-bar.js：

function createMyNavBar(body) {
  const attrNavBar = {
    style: `
    position: fixed;
    top: 0;
    left: 0;
    width: 150px;
    height: 50px;
    background-color: green;
    `
  };
  const navContainer = document.createElement("div");
  setAttributes(navContainer, attrNavBar);

  const attrP = {
    style: `
    display: flex;
    justify-content: center;
    `
  };
  const p = document.createElement("p");
  p.textContent = "nav bar";
  setAttributes(p, attrP);

  navContainer.appendChild(p);
  body.appendChild(navContainer);
}

function setAttributes(element, attributes) {
  Object.keys(attributes).forEach((attr) => {
    element.setAttribute(attr, attributes[attr]);
  });
}

2. 在所有目标页面中引入该文件并调用函数 #

项目内的每个HTML页面（包括首页、page1.html、page2.html等），都需要在<body>末尾引入nav-bar.js，并调用createMyNavBar传入当前页面的document.body：

以page1.html为例：

<!DOCTYPE html>
<html>
  <head>
    <title>Page 1</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="../src/styles.css" />
  </head>
  <body>
    <div id="idDiv">
      <p>PAGE 1</p>
      <a href="../index.html">回到首页</a>
    </div>
    <script src="../src/nav-bar.js"></script>
    <script>
      createMyNavBar(document.body);
    </script>
  </body>
</html>

首页的代码可简化为：

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="src/styles.css" />
  </head>

  <body>
    <div id="idDiv">
      <p>HOME PAGE</p>
      <a id="id1" href="page/page1.html"> page 1 </a> <br />
      <a id="id2" href="page/page2.html"> page 2 </a>
    </div>
    <script src="src/nav-bar.js"></script>
    <script>
      createMyNavBar(document.body);
    </script>
  </body>
</html>

为什么不能直接获取跳转页面的body？ #

当用户点击<a>标签跳转时，浏览器会卸载当前页面的所有资源和JS上下文，加载新页面的文档。原页面的JS代码无法跨页面访问新页面的DOM，因此必须让新页面自身执行导航栏的创建逻辑。

内容的提问来源于stack exchange，提问作者problème0123