JavaScript实现页面跳转的几种常用方式

本文实例讲述了JavaScript实现页面跳转的几种常用方式。分享给大家供大家参考，具体如下：

第一种：

<script language="javascript" type="text/javascript">
    window.location.href="login.jsp?backurl="+window.location.href;
</script>

第二种：

<script language="javascript">
    alert("返回");
    window.history.back(-1);
</script>

第三种：

<script language="javascript">
    window.navigate("top.jsp");
</script>

第四种：

<script language="JavaScript">
    self.location='top.htm';
</script>

第五种：

<script language="javascript">
    alert("非法访问！");
    top.location='xx.jsp';
</script>

javascript中弹出选择框跳转到其他页面

<script language="javascript">
<!--
function logout()...{
if (confirm("你确定要注销身份吗？是－选择确定，否-选择取消"))...{
window.location.href="logout.asp?act=logout"
}
}
-->
</script>

javascript中弹出提示框跳转到其他页面

<script language="javascript">
<!--
function logout()...{
alert("你确定要注销身份吗？");
window.location.href="logout.asp?act=logout"
}
-->
</script>

补充：window.location="";和 location.replace("");有什么区别？

这两个都能让网页导向令一个网址，那么有什么区别呢？比如能带参数，不能带参数之类的.
 Replace?还是Reload()?
好像没什么区别吧？没试过
 
replace(),reload()是重新加载本页，而replace()可以导向另外一个URL
 
给你举个例子:

我们现在有3个页面（a.html, b.html, c.html）.
默认打开a.html页面,然后在a.html页面中通过一个链接转向a.html页面。

现在，我在b.html页面中用window.location.replace("c.html");与用window.location.href("c.html");分别进入c.html页面.

从用户界面来看是没有什么区别的，但是现在c.html页面有一个“返回”按钮，
用window.location.href("c.html");

进入c.html页面时,c.html页面中的调用window.history.go(-1);wondow.history.back();进入c.html页面时，一点这个"返回"按钮就要返回b.html页面的话，
而如果用window.location.replace("c.html");进入c.html页面的话，
c.html页面中的调用window.history.go(-1);wondow.history.back();方法是不好用的，会返回到a.html.
 
因为window.location.replace("c.html");是不会向服务器发送请求而进行跳转，而window.history.go(-1);wondow.history.back();方法是根据服务器记录的请求决定该跳到哪个页面的，所以会跳到系统默认页面a.html 。

window.location.href("c.html");是向服务器发送请求的跳转，window.history.go(-1);wondow.history.back();方法是根据服务器记录的请求决定该跳到哪个页面的，所以就可以返回到b.html。

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • JavaScript中通过提示框跳转页面的方法

    通过提示框跳转页面具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-"> <title>Document</title> </head> <body> <script> window.onload = function(){ //设置当页面加载时执行 var btn =do

  • js点击返回跳转到指定页面实现过程

    这个功能之前有简单的带过,这次详细的讲解下原理和存在的问题(由于是运用html5的新API 所以有兼容问题,推荐移动端使用该方法). 功能描述: 在浏览器中新建标签页并指定一个网址,网页加载完毕后,正常流程下是不允许点击返回的.因为当前标签页的相关历史记录是没有的,所以没有记录可以返回. 应客户要求,需要在这种情况下,给他的历史记录里添加一个链接(比如首页),这样在新打开的页面,点击返回就可以跳转到首页,让用户看到系统的各种功能,推广平台. 一.知识要点 HTML5引进了history.push

  • JS控制页面跳转时未请求要跳转的地址怎么回事

    其实,想表达的仅仅是,在js中通过window.location.href控制页面跳转时,有时会跳转至缓存页面,并没有真正去请求要跳转的地址,导致页面数据未能及时加载刷新. 直奔code... 解决办法: 在HTML中埋入隐藏from,通过js调用from进行请求链接地址 <form id='hidden_submit_info' method="post" enctype="multipart/form-data" action="test.php

  • JS在一定时间内跳转页面及各种刷新页面的实现方法

    1.js 代码: <SCRIPT LANGUAGE="JavaScript"> var time = 5; //时间,秒 var timelong = 0; function diplaytime(){ //时间递减 document.all.his.innerHTML = time -timelong ; timelong ++; } function redirect(){ //跳转页 //history.back(); window.location.href=&qu

  • 静态页面html中跳转传值的JS处理技巧

    本文实例讲述了静态页面html中跳转传值的JS处理技巧.分享给大家供大家参考,具体如下: 在html中通过"?"传值: <a href="index2.html?name=caoy">静态传值</a> 在跳转到的页面index2.html中接收: var name=UrlParm.parm("name"); 代码如下: index.html: <script type="text/javascript&qu

  • JavaScript实现页面跳转的几种常用方式

    本文实例讲述了JavaScript实现页面跳转的几种常用方式.分享给大家供大家参考,具体如下: 第一种: <script language="javascript" type="text/javascript"> window.location.href="login.jsp?backurl="+window.location.href; </script> 第二种: <script language="j

  • Javascript实现页面跳转的几种方式分享

    第一种: 复制代码 代码如下: <script language="javascript" type="text/javascript">window.location.href="login.jsp?backurl="+window.location.href; </script> 第二种: 复制代码 代码如下: <script language="javascript">alert(&q

  • js实现页面跳转的五种方法推荐

    js实现页面跳转的五种方法推荐 第一种: 复制代码 代码如下: <script language="javascript" type="text/javascript"> window.location.href="xx.jsp?backurl="+window.location.href; </script> 第二种: 复制代码 代码如下: <script language="javascript&quo

  • JavaScript实现页面跳转的方式汇总

    在动手做网站时,不可避免的会碰到页面跳转的问题,新页面是在当前页面打开呢?还是在新窗口打开呢?是不是需要依据参数进行跳转呢或者要经过用户确认后再跳转呢?等等很多种情况,下面我们来看下常用的一些JS实现页面跳转的方式例子. 按钮式: <INPUT name="pclog" type="button" value="GO" onClick="location.href='http://www.ddhbb.com/'">

  • js实现页面跳转的几种方法小结

    按钮式: <INPUT name="pclog" type="button" value="GO" onClick="location.href='http://www.jb51.net/'"> 链接式: <a href="javascript:history.go(-1)">返回上一步</a> <a href="<%=Request.ServerV

  • Android Intent实现页面跳转的两种方法

    Android Intent实现页面跳转的两种方法

    本文实例为大家分享了Intent实现页面跳转的两种的方法,供大家参考,具体内容如下 下图中两个不同的方法就是两种页面之间跳转的情况 1).跳转不返回数据 2).跳转返回数据 实例: 第一种启动方式(跳转不返回数据) 第二种启动方式(跳转返回数据) 先看第一种: 点击第一种启动方式按钮会出现右边的图,然后再点击Button按钮返回左边的界面,TextView中的内容没变. 再看第二种启动方式 不同的是,点击Button按钮返回左边的界面,TextView中的内容变成了你好. 下面是所有代码 And

  • Vue页面跳转传递参数及接收方式

    最近接触了vue项目,这里记录一下vue跳转到下一页面携带参数的两种方式. 典型应用场景:列表页跳转到详情页 一.配置路由 文件路径:src/router/config.php import Vue from 'vue' import Router from 'vue-router' import classify from '.././components/classify/classify.vue' import classifyChild from '.././components/cla

  • JavaScript实现继承的6种常用方式总结

    目录 1.原型链继承 2.借用构造函数继承 3.组合继承(经典继承) 4.原型式继承 方法一:借用构造函数 方法二:Object.create() 5.寄生式继承 6.寄生组合式继承 7.ES6.Class实现继承 JavaScript想实现继承的目的:重复利用另外一个对象的属性和方法. 1.原型链继承 让一个构造函数的原型是另一个类型的实例,那么这个构造函数new出来的实例就具有该实例的属性. 当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依

  • JS实现继承的几种常用方式示例

    JS实现继承的几种常用方式示例

    本文实例讲述了JS实现继承的几种常用方式.分享给大家供大家参考,具体如下: 1,原型链继承 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原型链继承</title> </head> <body> <script> /** * 优点: * 实例是父类的实例也是子类的实例

  • Selenium Webdriver元素定位的八种常用方式(小结)

    Selenium Webdriver元素定位的八种常用方式(小结)

    在使用selenium webdriver进行元素定位时,通常使用findElement或findElements方法结合By类返回的元素句柄来定位元素.其中By类的常用定位方式共八种,现分别介绍如下. 1. By.name() 假设我们要测试的页面源码如下: <button id="gbqfba" aria-label="Google Search" name="btnK" class="gbqfba"><

随机推荐