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 相关文章推荐
页面载入结束自动调用js函数示例
Sep 23 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
require.js的用法详解
Oct 20 Javascript
node.js require() 源码解读
Dec 13 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
vue 组件高级用法实例详解
Apr 11 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 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读取excel文件的简单实例
2013/08/26 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
python基础知识小结之集合
2015/11/25 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
struct与class的区别
2014/02/03 面试题
创建卫生先进单位实施方案
2014/03/10 职场文书
材料化学专业求职信
2014/07/15 职场文书
语文课外活动总结
2014/08/27 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
部门2014年度工作总结
2014/11/12 职场文书
总账会计岗位职责
2015/04/02 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
高中团支书竞选稿
2015/11/21 职场文书