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技术实现Tab页界面之二
Sep 21 Javascript
Jquery replace 字符替换实现代码
Dec 02 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
checkbox选中与未选中判断示例
Aug 04 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
Vue.js简易安装和快速入门(第二课)
Oct 17 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 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的一些小问题
2010/07/03 PHP
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
Python学生成绩管理系统简洁版
2020/04/05 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
python文件编写好后如何实践
2020/07/07 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
国际贸易专业推荐信
2013/11/15 职场文书
高一自我鉴定
2013/12/17 职场文书
股指期货心得体会
2014/09/10 职场文书
中学生学习保证书
2015/02/26 职场文书
医院合作意向书范本
2015/05/08 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL
MySQL七种JOIN类型小结
2021/10/24 MySQL
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers