不修改关联JS文件，如何实现HTML页无重定向展示另一页面并存储玩家名复用

核心实现路径 #

完全可以在不触发重定向、不跳转独立HTML页面的前提下满足需求，核心是用同文档DOM视图切换做伪页面跳转，全程不需要改动已关联的原有JS文件的任何代码：

• 在当前HTML文档内新增两个独立DOM块：一块是你自己写的「玩家姓名输入视图」，另一块是原页面自带的游戏主体容器
• 页面加载时默认隐藏原游戏容器，把姓名输入视图撑满整个视口。这块输入视图可以加不透明背景、做和独立页面完全一致的排版样式，从用户视角看和跳转到独立输入页没有任何区别，完全符合“展示另一页面内容但不跳转”的要求
• 等用户填完姓名点击确认按钮时，把收集到的姓名值直接挂载到原JS可访问的全局作用域（比如window.playerName这类全局属性），再把输入视图隐藏、显示原游戏容器，全程不会触发URL变更、页面重载。

关于localStorage的认知澄清 #

你之前觉得“无法通过localStorage存相关数据”的顾虑，本质是误以为原JS需要自带localStorage读取逻辑才能拿到姓名，实际上完全可以解耦：

你在自己新增的提交回调里可以同时完成两件事：一是把姓名值同步赋值给原JS要读取的全局变量，满足后续游戏流程的实时调用需求；二是把同一份姓名备份写入localStorage，后续用户刷新页面时，你可以先从localStorage读回姓名、挂载到对应全局属性，再直接显示游戏界面——既实现了数据持久化，又完全没有修改原JS的任何代码。

实操避坑点 #

• 全局变量的键名不需要硬猜：打开浏览器开发者工具，在原JS初始化执行的位置打个断点，就能直接看到原JS实际从哪个全局属性读取玩家姓名，你只要把收集到的姓名值正确赋值给对应键名即可，不需要改动原JS的读取逻辑
• 不要用iframe嵌套独立输入页实现效果：这种方式不仅容易触发跨域读取全局变量的兼容问题，还会导致原JS的事件点击、滚动交互出现层级遮挡bug，同文档内的DOM切换是开发成本最低、兼容性最好的方案
• 不需要特意做路由跳转：很多人觉得“换页面内容”必须改路由、加跳转，实际上单页内的视图切换完全可以实现和多页跳转一样的用户体验，还没有跳转时的白屏加载问题

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