zoukankan      html  css  js  c++  java
  • window.location.href跳转无效

    window.location.href跳转无效

     
     
    问题情况
    JS中设置window.location.href跳转无效
     
    原因是 a标签的href跳转会执行在window.location.href设置的跳转之前:
    如果是表单form的话  也会先执行form提交。
    提交之后 就已经不在当前页面了。所以 window.location.href无效。
     
    解决方法一
    在js函数中加上
    window.event.returnValue=false
    这个属性放到提交表单中的onclick事件中在这次点击事件不会提交表单,如果放到超链接中则在这次点击事件不执行超链接href属性。
    改成如下代码后window.location.href成功跳转:
    [html] view plain copy
    1. <script type="text/javascript">  
    2.    function checkUser()  
    3. {   
    4.      if(2!=1){  
    5.         window.location.href="login.jsp";    
    6.      window.event.returnValue=false;  
    7.      }  
    8. }  
    9.   </script>   
    10.   
    11. <div class="extra">  
    12.           <a class="ui blue right floated primary button" onclick="checkUser()"  href="bookConfirm?userId=${account.id}&roomNum=${room.roomNum}&stime=${stime }&etime=${etime }">确认预订</a>  
    13.            </div>  
     
     
    解决方法二
    点击事件中  onclick="checkUser()"  变成 onclick="return checkUser();"
    并且在 checkUser中 return  false;这样的话 a标签的href也不会执行。 这样就能window.location.href顺利跳转。
    代码如下:
    [html] view plain copy
    1.  <script type="text/javascript">  
    2.     
    3.    function checkUser()  
    4. {   
    5.      if(<%=flag%>!=1){  
    6.         window.location.href="login.jsp";  
    7.      return false;  
    8.      }  
    9. }  
    10.   </script>  
    11.   
    12.  <div class="extra">  
    13.           <a class="ui blue right floated primary button" onclick="return checkUser();"    
    14.   
    15. href="bookConfirm?userId=${account.id}&roomNum=${room.roomNum}&stime=${stime }&etime=${etime   
    16.   
    17. }">确认预订</a>  
    18.            </div>  
     
     
     
    解决方法三
    感谢qmm0523 在评论中提出这种解法
    如果是form体提交的话还可以把summit改成button调用js提交,这样window.location.href也会在js提交summit之前执行成功跳转。
    如下:
    [html] view plain copy
    1. function checkUser()  
    2. {   
    3.      if(<%=flag%>!=1){  
    4.         window.location.href="login.jsp";  
    5.      return false;  
    6.      }  
    7.  document.getElementById("form").submit();  
    8. }  
    9.   
    10.   
    11.     <form action="addRoom" method="post"   name="from" id="form">  
    12.             <table align="center" border="1" class="commTable">  
    13.                 <tr>  
    14.                     <td class="right"><span  
    15.                         style="font-weight: blod;">房号:</span></td>  
    16.                     <td><input type="text" name="roomNum" size="25"  
    17.                         id="roomNum" /></td>  
    18.                 </tr>  
    19.                 <tr>  
    20.                     <td colspan="2" align="center"><button   value="添加"  
    21.                         onclick="checkUser()" /></td>  
    22.                 </tr>  
    23.             </table>  
    24.         </form>  

    声明:本文为转载,再次十分百分千分万分感谢博主的分享,谢谢。

  • 相关阅读:
    上行带宽和下行带宽是什么意思?各有什么作用?
    Windows下安装OpenSSL及其使用
    openssl的证书格式转换
    科普:TLS、SSL、HTTPS以及证书(转)
    ELK日志分析平台搭建全过程
    【周末学习】五格货栈的互联网思维:如何不花一分钱实现...
    励志语录
    highstock K线图 深入研究
    关于highstock横坐标的一些的一些说明(1)使用UTC时间
    HighCharts/Highstock使用小结,使用汉化及中文帮助文档
  • 原文地址:https://www.cnblogs.com/treelie/p/13458045.html
Copyright © 2011-2022 走看看