Muse网站多密码对应多页面跳转的JavaScript脚本修改咨询

嘿，这个需求其实很好实现，核心思路就是用一个密码-页面映射对象来管理所有密码和对应跳转地址，后续加新密码也超级方便，不用改太多逻辑。我给你写个完整的示例脚本，一步一步来：

1. 基础实现代码 #

把下面的代码放到你的Muse网站对应的脚本区域即可：

// 定义密码与跳转页面的映射表，新增密码直接在这里加键值对就行
const passwordMap = {
  'CUSTOMPASSWORD1': 'mywebsite.com/custompassword1.html',
  'CUSTOMPASSWORD2': 'mywebsite.com/custompassword2.html',
  'CUSTOMPASSWORD3': 'mywebsite.com/custompassword3.html'
  // 更多密码和页面继续往下追加...
};

// 获取触发按钮（记得把"passwordBtn"改成你实际的按钮ID）
const passwordBtn = document.getElementById('passwordBtn');

// 给按钮绑定点击事件
passwordBtn.addEventListener('click', function() {
  // 弹出密码输入框，默认用prompt，你也可以自定义弹窗样式
  const inputPassword = prompt('请输入访问密码：');
  
  // 判断用户是否输入了内容（点击取消的话inputPassword为null）
  if (inputPassword) {
    // 检查输入的密码是否在映射表里
    if (passwordMap.hasOwnProperty(inputPassword)) {
      // 跳转到对应页面
      window.location.href = passwordMap[inputPassword];
    } else {
      // 密码错误时提示用户
      alert('密码错误，请重新输入！');
    }
  }
});

2. 代码关键部分解释 #

• 密码映射表：passwordMap是核心，每一个键就是密码，对应的值是跳转页面地址。以后要加新的密码和页面，直接在这里加一行键值对就行，不用动后面的逻辑代码。
• 按钮事件绑定：先获取你的触发按钮，给它添加点击事件，点击后弹出输入框供用户输入密码。
• 输入验证逻辑：判断用户输入的密码是否存在于映射表中，存在就跳转对应页面，不存在则弹出错误提示。

3. 体验优化建议 #

如果你想让交互更贴合你的网站风格，可以试试这些小改进：

• 把默认的prompt换成自定义模态弹窗（用HTML/CSS写一个和Muse网站风格匹配的输入框），提升视觉一致性。
• 添加大小写不敏感的匹配逻辑，比如把输入的密码转成大写再对比：const normalizedPassword = inputPassword.toUpperCase();，这样用户输入小写也能正确匹配。
• 重要提醒：前端密码验证只是基础拦截，真正的页面安全一定要靠后端验证！前端的密码逻辑很容易被破解，不能完全依赖它来保护私密页面。

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