Javascript页面跳转常见实现方式汇总


Posted in Javascript onNovember 28, 2015

本文实例总结了Javascript页面跳转常见实现方式。分享给大家供大家参考,具体如下:

概述

相信很多Web开发者都知道,在开发Web程序的时候,对于页面之间的跳转,有很多种,但是有效的跳转则事半功倍,下面就是我在平时的开发过程中所用到的一些JavaScript跳转方式,拿出和大家共享一下。

第一种:直接跳转加参数

<script language="javascript" type="text/javascript">
  window.location.href="login.jsp?backurl="+window.location.href; 
</script>

直接跳转无参数:

<script>window.location.href='http://www.baidu.com';</script>

第二种:返回上一次预览界面
<script language="javascript">
alert("返回");
window.history.back(-1);
</script>

标签嵌套:

<a href="javascript:history.go(-1)">返回上一步</a>
<a href="<%=Request.ServerVariables("HTTP_REFERER")%>">返回上一步</a>

第三种:指定跳转页面 对框架无效。

<script language="javascript">
 window.navigate("top.jsp");
</script>

第四种:指定自身跳转页面 对框架无效。

<script language="JavaScript">
 self.location='top.htm';
</script>

第五种:指定自身跳转页面 对框架有效。

<script language="javascript">
 alert("非法访问!");
 top.location='xx.aspx';
</script>

第六种:按钮式 在button按钮添加 事件跳转

<input name="pclog" type="button" value="GO" onClick="location.href='login.aspx'">

第七种:在新窗口打开:

<a href="javascript:" onClick="window.open('login.aspx','','height=500,width=611,scrollbars=yes,status=yes')">开新窗口</a>

 
应用实例:
<head> 
<script language="javascript">
function old_page() 
{ 
window.location = "login.aspx" 
} 
function replace() 
{ 
window.location.replace("login.aspx") 
} 
function new_page() 
{ 
window.open("login.aspx") 
} 
</script> 
</head> 
<body> 
<input type="button" onclick="new_page()" value="在新窗口打开s"/> 
<input type="button" onclick="old_page()" value="跳转后有后退功能"/> 
<input type="button" onclick="replace()" value="跳转后没有后退功能"/> 
</body>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javaScript使用EL表达式的几种方式
May 27 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
JQuery DIV 动态隐藏和显示的方法
Jun 23 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
Angular5.1新功能分享
Dec 21 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 Javascript
Javascript编程之继承实例汇总
Nov 28 #Javascript
Javascript编程中几种继承方式比较分析
Nov 28 #Javascript
详解JavaScript的变量和数据类型
Nov 27 #Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 #Javascript
Bootstrap精简教程
Nov 27 #Javascript
Bootstrap每天必学之标签与徽章
Nov 27 #Javascript
Bootstrap每天必学之导航条
Nov 27 #Javascript
You might like
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
php实现评论回复删除功能
2017/05/23 PHP
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
python re模块findall()函数实例解析
2018/01/19 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
Django choices下拉列表绑定实例
2020/03/13 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
金融事务专业毕业生求职信
2014/02/23 职场文书
法律顾问服务方案
2014/05/15 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
领导班子整改方案
2014/10/25 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
教育教学读书笔记
2015/07/02 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android