脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Javascript页面跳转

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

 更新时间：2015年11月28日 11:33:47   作者：记忆逝去的青春  
这篇文章主要介绍了Javascript页面跳转常见实现方式,结合实例汇总分析了JavaScript常用的七种页面跳转实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例总结了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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 关于JS中的全等和不全等、等于和不等于问题

    关于JS中的全等和不全等、等于和不等于问题

    等号和非等号的同类运算符是全等号和非全等号。这两个运算符所做的与等号和非等号相同，只是它们在检查相等性前，不执行类型转换。接下来通过本文给大家介绍JS中的全等和不全等、等于和不等于，一起看看吧
    2021-09-09
  • Bootstrap基本组件学习笔记之按钮组(8)

    Bootstrap基本组件学习笔记之按钮组(8)

    这篇文章主要为大家详细介绍了Bootstrap基本组件学习笔记之按钮组,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Javascript玩转继承(一)

    Javascript玩转继承(一)

    最近一直在学Javascript，打算写一些文章，算做自己的学习心得吧，也可以算是学习笔记。没有系统的知识点，太基础的不想写，主要是写一些自己觉得有价值的地方
    2014-05-05
  • 基于JS实现移动端访问PC端页面时跳转到对应的移动端网页

    基于JS实现移动端访问PC端页面时跳转到对应的移动端网页

    不想通过CSS自适应在PC端和移动端分别显示不同的样式，那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了，那么怎么跳转呢，网上也有很多文章说明，以下实现思路经过小编测试过，需要的朋友可以参考下
    2016-04-04
  • 在你的网页中嵌入外部网页的方法

    在你的网页中嵌入外部网页的方法

    在你的网页中嵌入外部网页的方法...
    2007-04-04
  • JS中关于事件处理函数名后面是否带括号的问题

    JS中关于事件处理函数名后面是否带括号的问题

    JS中的事件处理（事件绑定）就是让某种或某些事件触发某些活动。有两种常见的形式，分别是DOM Level 0 和DOM Level 2。今天总结一个关于事件处理程序的小细节。感兴趣的朋友一起学习吧
    2016-11-11
  • js 实现菜单上下显示附效果图

    js 实现菜单上下显示附效果图

    菜单上下显示的实现方法有很多,在本文将为大家介绍下使用js是如何实现的，需要的朋友不要错过
    2013-11-11
  • bootstrap弹出层的多种触发方式

    bootstrap弹出层的多种触发方式

    这篇文章主要为大家详细介绍了bootstrap弹出层的多种触发方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 微信小程序实现蓝牙设备搜索及连接功能示例详解

    微信小程序实现蓝牙设备搜索及连接功能示例详解

    这篇文章主要介绍了微信小程序实现蓝牙设备搜索及连接功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-06-06
  • echart在微信小程序的使用简单示例

    echart在微信小程序的使用简单示例

    最近公司的项目中需要在小程序内使用echarts组件来展示数据,下面这篇文章主要给大家介绍了关于echart在微信小程序的使用方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02

最新评论