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 相关文章推荐
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 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与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
js获取多个tagname的节点数组
2013/09/22 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
js实现简单的验证码
2015/12/25 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
Python字符编码与函数的基本使用方法
2017/09/30 Python
python zip()函数使用方法解析
2019/10/31 Python
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
了解AppleTalk协议吗
2014/04/01 面试题
实习护士自我鉴定
2013/10/13 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
工作检讨书大全
2015/01/26 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书