解决 JS 中 window.location.href 跳转无效的三种方法

问题背景与原因分析

javascript 中设置window.location.href跳转无效问题解决办法

问题情况

在 JavaScript 代码中，有时会发现设置 window.location.href 进行页面跳转并未生效。

代码如下：


<script type="text/javascript"> 
  function checkUser() 
{  
   if(2!=1){ 
    window.location.href="login.jsp" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ;  
   } 
} 
 </script>  
 
<div class="extra"> 
     <a class="ui blue right floated primary button" onclick="checkUser()" href="bookConfirm?userId=${account.id}&roomNum=${room.roomNum}&stime=${stime }&etime=${etime }" rel="external nofollow" rel="external nofollow" >确认预订</a> 
      </div>

造成这一现象的原因是，a 标签的 href 属性跳转会在 window.location.href 设置的跳转之前执行。

如果是 form 表单的话，也会先执行 form 提交。

一旦提交或跳转发生，浏览器就已经离开了当前页面，因此后续 window.location.href 的设置便失效了。

解决方案一：使用 window.event.returnValue

解决方法一

在 JS 函数中加上


window.event.returnValue=false

这个属性放到提交表单中的 onclick 事件中，在这次点击事件不会提交表单；如果放到超链接中，则在这次点击事件不执行超链接 href 属性。

改成如下代码后 window.location.href 成功跳转：


<script type="text/javascript"> 
  function checkUser() 
{  
   if(2!=1){ 
    window.location.href="login.jsp" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ;  
   window.event.returnValue=false; 
   } 
} 
 </script>  
 
<div class="extra"> 
     <a class="ui blue right floated primary button" onclick="checkUser()" href="bookConfirm?userId=${account.id}&roomNum=${room.roomNum}&stime=${stime }&etime=${etime }" rel="external nofollow" rel="external nofollow" >确认预订</a> 
      </div>

解决方案二：利用 return false 阻止默认行为

解决方法二

将点击事件中 onclick="checkUser()" 变成 onclick="return checkUser();"

并且在 checkUser 中 return false；这样的话 a 标签的 href 也不会执行，这样就能 window.location.href 顺利跳转。

代码如下：


<script type="text/javascript"> 
  
  function checkUser() 
{  
   if(<%=flag%>!=1){ 
    window.location.href="login.jsp" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ; 
   return false; 
   } 
} 
 </script> 
 
 <div class="extra"> 
     <a class="ui blue right floated primary button" onclick="return checkUser();"  
 
href="bookConfirm?userId=${account.id}&roomNum=${room.roomNum}&stime=${stime }&etime=${etime  
 
}">确认预订</a> 
      </div>

解决方案三：修改表单提交方式

解决方法三

如果是 form 体提交的话，还可以把 submit 改成 button 调用 JS 提交，这样 window.location.href 也会在 JS 提交 submit 之前执行成功跳转。

如下：


function checkUser() 
{  
   if(<%=flag%>!=1){ 
    window.location.href="login.jsp" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ; 
   return false; 
   } 
 document.getElementById("form").submit(); 
} 
 
 
  <form action="addRoom" method="post"  name="from" id="form"> 
      <table align="center" border="1" class="commTable"> 
        <tr> 
          <td class="right"><span 
            style="font-weight: blod;">房号：</span></td> 
          <td><input type="text" name="roomNum" size="25" 
            id="roomNum" /></td> 
        </tr> 
        <tr> 
          <td colspan="2" align="center"><button  value="添加" 
            onclick="checkUser()" /></td> 
        </tr> 
      </table> 
    </form>

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

JavaScript 中 window.location.href 跳转失效的三种解决方案

问题背景与原因分析

解决方案一：使用 window.event.returnValue

解决方案二：利用 return false 阻止默认行为

解决方案三：修改表单提交方式

实用工具推荐