如何用JavaScript实现页面跳转？我的跳转代码无法生效

问题描述 #

我尝试用JavaScript实现点击按钮跳转至dual.php页面，但始终无法生效。我的JS代码如下：

btnSubmitJoin.onclick = function() {
  window.location.href = "dual.php";
}

我期望实现的效果和以下HTML按钮的跳转逻辑一致：

<button style="--clr:#39FF14" onClick="parent.location='single.php'"><span>Single Player</span><i></i></button>

我已经试过window.location、window.parent.location、window.location.href、window.location.replace()这些写法，但都没效果。

相关截图：

• JavaScript代码截图：
• 按钮截图：
• 期望效果示例截图：

可能的问题点及解决方法 #

1. 按钮元素未正确获取
   先检查btnSubmitJoin是否真的指向目标按钮。可以在函数内添加console.log(btnSubmitJoin)，如果输出null或undefined，说明元素未找到。

   • 解决：确保JS代码在DOM加载完成后执行，比如放在DOMContentLoaded事件中，或者页面底部：

     document.addEventListener('DOMContentLoaded', function() {
       const btnSubmitJoin = document.getElementById('btnSubmitJoin'); // 需确保按钮对应此id
       if(btnSubmitJoin) {
         btnSubmitJoin.onclick = function() {
           window.parent.location.href = "dual.php";
         }
       }
     });
     

2. 按钮默认行为冲突
   如果按钮在表单内，点击会触发表单提交，页面刷新会覆盖跳转逻辑。

   • 解决：在点击事件中阻止默认行为：

     btnSubmitJoin.onclick = function(e) {
       e.preventDefault();
       window.parent.location.href = "dual.php";
     }
     

3. 文件路径错误
   确认dual.php的路径是否正确。若当前页面在子目录，可能需要使用绝对路径（如/dual.php）或相对上级目录的路径（如../dual.php）。

4. iframe环境限制
   示例代码用了parent.location，说明当前页面可能在iframe中，直接用window.location只会在iframe内跳转，外部无法看到变化。

   • 解决：明确使用window.parent.location.href = "dual.php"，确保跳转父窗口。

5. 事件绑定被覆盖
   检查是否有其他JS代码给同一按钮绑定了点击事件，覆盖了当前逻辑。可以用console.log(btnSubmitJoin.onclick)查看当前绑定的函数是否正确。

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