如何在不同页面的JavaScript文件间传递usr_id变量

嘿，我来帮你搞定这个跨JS文件传递usr_id的问题！

首先咱们得先搞清楚你遇到undefined的核心原因：大概率是变量赋值的时机晚于另一个JS文件读取它的时机，或者是全局变量的作用域没处理对。咱们一步步来解决：

第一步：先确保当前文件的usr_id正确挂载到全局 #

先把你现有的代码优化下，避免隐式全局和旧值干扰，明确把变量挂到window上：

// 当前JS文件代码
let array_Online3 = []; // 提前声明数组，避免隐式全局
delUser.addEventListener("click", function() {
    array_Online3 = []; // 每次点击清空数组，防止旧选中值干扰
    $("input:checkbox[name=u_id]:checked").each(function(){
        array_Online3.push($(this).val());
    });
    
    if(array_Online3.length > 0) {
        window.usr_id = array_Online3[0]; // 明确挂载到window全局对象
        console.log("全局usr_id已赋值：", window.usr_id); // 这里先确认值是正确的
    } else {
        console.warn("没有选中任何用户哦！");
    }
});

第二步：解决另一个JS文件读取的时机问题 #

如果另一个JS文件在页面加载时直接读取window.usr_id，那肯定会拿到undefined——因为点击事件还没触发，变量还没赋值。这里给你两种可靠的解决方案：

方案1：用自定义事件传递值

这种方式能保证另一个文件在usr_id真正赋值后才拿到它：

• 在当前文件赋值后触发自定义事件：

  // 当前文件，赋值window.usr_id之后添加
  window.dispatchEvent(new CustomEvent('usrIdUpdated', { detail: window.usr_id }));
  

• 在另一个JS文件里监听这个事件：

  // 另一个JS文件的代码
  window.addEventListener('usrIdUpdated', function(e) {
      const targetUsrId = e.detail;
      console.log("拿到的用户ID：", targetUsrId);
      // 这里执行你的表单更新操作
      document.getElementById("user_id").value = targetUsrId;
  });
  

方案2：用临时存储（更灵活）

如果不想依赖全局变量，也可以用sessionStorage临时存储值，适合需要跨页面或者延迟读取的场景：

• 当前文件赋值时存储：

  // 当前文件，选中用户后
  if(array_Online3.length > 0) {
      sessionStorage.setItem('currentUsrId', array_Online3[0]);
  }
  

• 另一个JS文件在需要时读取（比如点击表单更新按钮时）：

  // 另一个JS文件代码
  const targetUsrId = sessionStorage.getItem('currentUsrId');
  if(targetUsrId) {
      document.getElementById("user_id").value = targetUsrId;
      // 用完可以删掉，避免残留值干扰后续操作
      sessionStorage.removeItem('currentUsrId');
  }
  

最后验证小技巧 #

1. 先在当前文件的点击事件里确认window.usr_id有正确的值（看控制台输出）。
2. 检查另一个JS文件的加载顺序：如果它在当前文件之前加载，记得调整HTML里的script标签顺序，把当前文件放在前面。

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