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


Posted in Javascript onFebruary 09, 2017

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

问题情况

JS中设置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无效。

解决方法一

在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>

解决方法二

点击事件中  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体提交的话还可以把summit改成button调用js提交,这样window.location.href也会在js提交summit之前执行成功跳转。

如下:

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 相关文章推荐
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 Javascript
Javascript 去除数组的重复元素
May 04 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
使用js画图之饼图
Jan 12 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
JS面向对象实现飞机大战
Aug 26 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 Javascript
微信小程序之picker日期和时间选择器
Feb 09 #Javascript
BootStrap 弹出层代码
Feb 09 #Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 #Javascript
javascript history对象详解
Feb 09 #Javascript
jquery dialog获取焦点的方法
Feb 09 #Javascript
jQuery实现淡入淡出的模态框
Feb 09 #Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 #Javascript
You might like
PHP常用的排序和查找算法
2015/08/06 PHP
浅谈使用 Yii2 AssetBundle 中 $publishOptions 的正确姿势
2017/11/08 PHP
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
探究python中open函数的使用
2016/03/01 Python
Python 爬虫模拟登陆知乎
2016/09/23 Python
python 中字典嵌套列表的方法
2018/07/03 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
验房委托书
2014/08/30 职场文书
个人租房协议书样本
2014/10/01 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
医生个人年度总结
2015/02/28 职场文书
小学教师自我评价
2015/03/04 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫