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面向对象之Javascript 继承
May 04 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
js实现tab切换效果
Feb 16 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
Vue兼容ie9的问题全面解决方案
Jun 19 Javascript
在vue项目中封装echarts的步骤
Dec 25 Vue.js
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
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
用JQuery调用Session的实现代码
2010/10/29 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
js获取IFRAME当前的URL的方法
2013/11/13 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Python教程之全局变量用法
2016/06/27 Python
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
2014年个人技术工作总结
2014/12/08 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
求职自我评价范文
2015/03/09 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
护士旷工检讨书
2015/08/15 职场文书