如何在当前标签页打开指定URL？现有JS代码仅触发页面刷新

你的原代码可以正常在新标签页打开搜索链接：

let url ='https://www.google.com/search?q='+document.getElementById('search').value;
window.open(url)

但改用window.open(url,"_self")或window.location.href = url时，页面只会重新加载，无法跳转到目标地址，大概率是以下原因导致，对应解决办法如下：

1. 表单默认提交行为干扰 #

如果这段跳转代码是绑定在表单的submit事件中，表单默认的提交动作会刷新页面，直接覆盖你的跳转逻辑。解决办法是阻止表单默认行为：

// 假设你的表单可通过选择器获取
document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault(); // 关键：阻止表单默认提交刷新
  const searchVal = document.getElementById('search').value;
  const url = `https://www.google.com/search?q=${searchVal}`;
  window.location.href = url;
});

2. 未正确获取输入元素 #

如果document.getElementById('search')找不到对应的输入框，会导致url拼接出异常值（比如https://www.google.com/search?q=undefined），部分浏览器可能表现为页面刷新而非跳转。可以加个元素存在性校验：

const searchInput = document.getElementById('search');
if (!searchInput) {
  console.error("找不到id为'search'的输入元素");
  return;
}
const url = `https://www.google.com/search?q=${searchInput.value}`;
window.location.href = url;

3. 尝试替代跳转方法 #

如果以上都没问题，试试用window.location.replace(url)替代window.location.href，这个方法会替换当前页面的历史记录，避免某些浏览器的缓存或历史记录干扰：

const url = `https://www.google.com/search?q=${document.getElementById('search').value}`;
window.location.replace(url);

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