JavaScript：跳转页面后能否操作新文档？附问题代码示例

兄弟，你遇到的这个问题其实是JS页面跳转的一个核心特性导致的——当你调用window.location.href跳转到新页面时，当前页面的JavaScript执行环境会被立即销毁，后续的代码要么根本跑不完，要么就是在原页面的DOM上瞎忙活，完全影响不到即将加载的新页面。所以你现在的写法肯定行不通，得换个思路。

先说说你代码里的问题：你先执行window.location.href = 'new.php'，再调用open(id)，但这时候浏览器已经开始卸载当前页面了，open函数里操作的$("#div1")、$("#div2")都是原页面的元素，和即将加载的new.php完全没关系，甚至AJAX请求可能还没发完就被中断了。

可行的解决方案 #

1. 通过URL参数传递数据（最常用） #

把需要的参数（比如你这里的id）放到新页面的URL查询参数里，然后在新页面的JavaScript中读取这个参数，再执行对应的操作。

修改原页面的openSide函数：

function openSide(x) {
  const id = x.innerHTML;
  // 用encodeURIComponent处理特殊字符，避免URL解析错误
  window.location.href = `new.php?id=${encodeURIComponent(id)}`;
}

然后在new.php中添加页面加载完成后的处理脚本：

// 等待新页面的DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 解析URL中的查询参数
  const urlParams = new URLSearchParams(window.location.search);
  const targetId = urlParams.get('id');
  
  if (targetId) {
    // 执行你原来open函数里的逻辑
    $("#div1").css("display", "none");
    $("#div2").css("display", "block"); // 你原来的代码这里漏了值，补全为block或其他合法值
    $("#tituloPlay").html(targetId);
    
    const xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState === 4 && this.status === 200) {
        $("#tabelaOuvirPlaylist").append(xhttp.responseText);
      }
    };
    xhttp.open("POST", "php/listarMusicasDePlaylist.php", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send(`id=${encodeURIComponent(targetId)}`);
  }
});

2. 用本地存储临时保存数据 #

如果参数比较复杂或者不想暴露在URL里，可以用localStorage或sessionStorage存储数据，新页面加载后读取并处理。

原页面的openSide函数：

function openSide(x) {
  const id = x.innerHTML;
  // 把id存到sessionStorage，关闭浏览器后自动清除
  sessionStorage.setItem('playlistId', id);
  window.location.href = 'new.php';
}

新页面的处理脚本：

document.addEventListener('DOMContentLoaded', function() {
  const targetId = sessionStorage.getItem('playlistId');
  
  if (targetId) {
    // 执行操作逻辑（和上面方案1的逻辑一致）
    $("#div1").css("display", "none");
    $("#div2").css("display", "block");
    $("#tituloPlay").html(targetId);
    
    // ... AJAX请求部分 ...
    
    // 用完后可以删除，避免下次进入页面时残留
    sessionStorage.removeItem('playlistId');
  }
});

3. 不跳转页面，用AJAX加载内容 #

如果不需要真正切换页面，可以把new.php的内容通过AJAX加载到当前页面的某个容器里，这样就能在当前JS环境中直接操作新内容：

function openSide(x) {
  const id = x.innerHTML;
  
  // 加载new.php的内容到当前页面的容器（比如#content）
  $.get('new.php', function(newContent) {
    $("#content").html(newContent);
    
    // 现在可以直接操作新加载的DOM了
    $("#div1").css("display", "none");
    $("#div2").css("display", "block");
    $("#tituloPlay").html(id);
    
    // ... AJAX请求部分 ...
  });
}

总结 #

总之，直接在跳转前的脚本里操作新页面是不可能的，因为跳转后原页面的JS上下文就被销毁了。你必须把需要的数据传递到新页面，让新页面自己执行对应的操作，或者改用不跳转的方式加载内容。

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