如何通过单份JavaScript向两个HTML页面渲染输出问卷内容

直接替换选择器不生效的核心原因是两个HTML是独立的页面运行上下文：

• 浏览器打开HTML1时加载的JS实例，和打开HTML2时加载的JS实例完全隔离，内存数据不互通
• HTML1里存储问卷结构的allSectionsArray数据，在页面跳转后会被直接销毁，HTML2加载时根本拿不到你在编辑页创建的问卷内容，自然渲染不出东西
• 你硬编码把选择器改成questionaire1的话，在HTML1运行时找不到id为questionaire1的容器，在HTML2运行时又没有源数据，两边都跑不通。

这个方案不需要改动你现有的渲染逻辑，只需要补全数据传递和页面环境判断即可，实现成本最低。

1. 给HTML1的跳转按钮加数据存储逻辑 #

找到HTML1里id为testButton的按钮绑定事件，在跳转前把全量问卷数据存入本地存储：

// 你已经引入了jQuery，可以直接绑定事件
$("#testButton").on("click", function(){
  // 把问卷结构、问卷名称存入localStorage
  localStorage.setItem("surveyBackup", JSON.stringify({
    sections: allSectionsArray,
    surveyName: $("#myText").text()
  }));
  // 跳转到第二个HTML页面，替换成你实际的HTML2文件名即可
  window.location.href = "new.html";
});

2. 修改公共JS文件DemoCode.js的逻辑 #

不要硬编码渲染容器id，页面加载时自动判断当前是编辑页还是预览页，匹配对应容器；如果是预览页，先读取存储的问卷数据再执行渲染：

// 全局初始化：自动匹配当前页面的渲染容器
let questionnaire;
let isPreviewMode = false;
if (document.getElementById("questionaire")) {
  // 当前是HTML1编辑页，匹配编辑容器
  questionnaire = document.getElementById("questionaire");
} else if (document.getElementById("questionaire1")) {
  // 当前是HTML2预览页，匹配预览容器，标记为预览模式
  questionnaire = document.getElementById("questionaire1");
  isPreviewMode = true;
}

// 页面加载完成后执行逻辑
$(document).ready(function(){
  if (isPreviewMode) {
    // 预览页逻辑：读取本地存储的问卷数据
    const savedSurvey = localStorage.getItem("surveyBackup");
    if (savedSurvey) {
      const surveyConfig = JSON.parse(savedSurvey);
      // 把读取到的问卷结构赋值给原有渲染逻辑依赖的allSectionsArray变量
      allSectionsArray = surveyConfig.sections;
      document.title = surveyConfig.surveyName;

      // 你原来的渲染逻辑完全不用改，questionnaire变量已经自动指向当前页的容器
      for (let i = 0; i < allSectionsArray.length; i++) {
        newSection(true, allSectionsArray[i][0]);
        for (let j = 0; j < allSectionsArray[i][3].length; j++) {
            switch (allSectionsArray[i][3][j][1]) {
                case 0:
                    newOption(questionnaire.querySelector("div.section:last-child ul"), true, j, i);
                    break;
                case 1:
                    newShAnSubquestion(questionnaire.querySelector("div.section:last-child ul"), true, j, i);
                    break;
                case 2:
                    newLoAnSubquestion(questionnaire.querySelector("div.section:last-child ul"), true, j, i);
                    break;
                case 3:
                    newNumSubquestion(questionnaire.querySelector("div.section:last-child ul"), true, j, i);
                    break;
                case 4:
                    newStarSubquestion(questionnaire.querySelector("div.section:last-child ul"), true, j, i);
                    break;
            }
        }
      }
    }
  } else {
    // 这里保留你原来HTML1编辑页的所有初始化逻辑即可，不需要改动
  }
})

注意避坑 #

• 注意拼写差异：你HTML里写的容器id是questionaire（少一个字母n），JS变量名是questionnaire（多一个n），写选择器的时候不要拼错，否则会拿不到DOM元素
• 两个HTML文件需要放在同一个目录下通过同个本地服务访问，或者直接同目录双击打开，不要跨目录存放，否则localStorage会因为同源策略限制无法读写
• 如果需要返回编辑页时保留之前编辑的内容，可以在编辑页初始化时也判断localStorage里是否有备份数据，有的话自动恢复即可。

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