如何实现index.html与jobs.html互嵌Base64代码以支持无限页面跳转？

问题根源 #

直接将两个页面的完整Base64编码互相嵌入会导致循环依赖死锁——浏览器解析index.html时需要加载jobs.html的Base64，而jobs.html的Base64里又包含index.html的Base64，无限嵌套下去会让浏览器无法完成解析，最终加载失败或崩溃。

可行实现方案 #

核心思路是：分别存储对方页面的纯净核心内容Base64，通过JavaScript触发跳转，用data:text/html;base64,协议动态加载对方页面。

步骤1：准备纯净页面内容 #

先写出两个页面的基础HTML（不含跳转逻辑），比如：

index.html 纯净版：

<!DOCTYPE html>
<html>
<body>
  <h1>Index Page</h1>
  <button onclick="goToJobs()">Go to Jobs</button>
</body>
</html>

jobs.html 纯净版：

<!DOCTYPE html>
<html>
<body>
  <h1>Jobs Page</h1>
  <button onclick="goToIndex()">Go to Index</button>
</body>
</html>

步骤2：转换为Base64编码 #

将上面两个纯净版的HTML内容分别转成Base64编码（可以用浏览器控制台的btoa()函数，或者在线Base64编码工具）。

比如用控制台编码的方式：
打开浏览器控制台，输入：

btoa(`<!DOCTYPE html>
<html>
<body>
  <h1>Index Page</h1>
  <button onclick="goToJobs()">Go to Jobs</button>
</body>
</html>`)

复制输出的Base64字符串，这就是jobs.html里要存储的indexBase64值。同理处理jobs.html的内容得到jobsBase64。

步骤3：编写最终页面代码 #

在index.html中加入跳转逻辑，嵌入jobs页面的Base64：

<!DOCTYPE html>
<html>
<body>
  <h1>Index Page</h1>
  <button onclick="goToJobs()">Go to Jobs</button>

  <script>
    // 替换成jobs.html纯净版的Base64编码
    const jobsBase64 = "PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCjxoZWFkPg0KPC9oZWFkPg0KPGJvZHk+DQogIDxoMT5Kb2lzIFBhZ2U8L2gxPg0KICA8YnV0dG9uIG9uY2xpY2s9ImdvVG9JbmRleCI+R28gdG8gSW5kZXg8L2J1dHRvbj4NCjwvYm9keT4NCjwvaHRtbD4=";

    function goToJobs() {
      window.location.href = `data:text/html;base64,${jobsBase64}`;
    }
  </script>
</body>
</html>

在jobs.html中加入跳转逻辑，嵌入index页面的Base64：

<!DOCTYPE html>
<html>
<body>
  <h1>Jobs Page</h1>
  <button onclick="goToIndex()">Go to Index</button>

  <script>
    // 替换成index.html纯净版的Base64编码
    const indexBase64 = "PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCjxoZWFkPg0KPC9oZWFkPg0KPGJvZHk+DQogIDxoMT5JbmRleCBQYWdlPC9oMT4NCjAgPGJ1dHRvbiBvbmNsaWNrPSJnb1RvSm9icyI+R28gdG8gSm9iczwvYnV0dG9uPg0KPC9ib2R5Pg0KPC9odG1sPg==";

    function goToIndex() {
      window.location.href = `data:text/html;base64,${indexBase64}`;
    }
  </script>
</body>
</html>

关键注意事项 #

• 禁止自动跳转：不要用window.onload自动触发跳转，否则会导致浏览器无限循环跳转直接崩溃，必须用手动触发（比如按钮点击）。
• 内联所有资源：如果页面需要CSS或JavaScript，必须全部内联到HTML中，因为data:协议加载的页面无法引用外部文件。
• 编码要准确：确保Base64编码的是纯净HTML内容，不要包含对方页面的跳转逻辑，避免嵌套体积膨胀和解析错误。

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