`
huobengluantiao8
  • 浏览: 1031323 次
文章分类
社区版块
存档分类
最新评论

JavaScript页面跳转技术笔记

阅读更多

今天看视频学习时学习了一种新技术,即平时我们在一个页面点击“提交”或“确认”会自动跳转到一个页面。
在网上搜了一下,关于这个技术处理有多种方法,我只记下我在视频里学到的三种:
1、用一个response.sendRedirect("目标页面.jsp\.htm");实现直接跳转;

2、有时我们需要有点提示,比如“x秒后自动跳转,若没有跳转,请点击此处”,则可以在myeclipse中调用Snippets中的Delay Go To URL.会自动生成如下代码:

<script language="JavaScript1.2" type="text/javascript">
<!--
//  Place this in the 'head' section of your page.  

function delayURL(url, time) {
    setTimeout("top.location.href='" + url + "'", time);
}

//-->

</script>

<!-- Place this in the 'body' section -->
<a href="javascript:" onClick="delayURL('myPage.htm','2000')">My Delayed Link</a>

将此代码修改为:

<script language="JavaScript1.2" type="text/javascript">
	function delayURL(url, time) {
		setTimeout("top.location.href='" + url + "'", time);
	}
</script>
<span id="time" style="background: red">3</span>
秒钟之后自动跳转,如果不跳转,请点击下面链接
<a href="目标页面.jsp">目标页面</a>
<script type="text/javascript">
	delayURL("目标页面.jsp", 3000);
</script>

然后将在3秒钟之后直接跳转到“目标页面”。这种方法就是设定几秒钟后跳转则在这过程中页面不会有变化,比如说设定3秒,然后随着时间的变化3变成2再变成1直至跳转,下面请看第三种方法。

3、把方法2中的代码修改为:

<script language="JavaScript1.2" type="text/javascript">
	function delayURL(url) {
	    var delay=document.getElementById("time").innerHTML;
	    //最后的innerHTML不能丢,否则delay为一个对象
	    if(delay>0){
	    delay--;
	    document.getElementById("time").innerHTML=delay;
	    }else{
	    window.top.location.href=url;
	    }
		setTimeout("delayURL('" + url + "')", 1000);
		//此处1000毫秒即每一秒跳转一次
	}
</script>
<span id="time" style="background: red">3</span>
秒钟之后自动跳转,如果不跳转,请点击下面链接
<a href="目标页面.jsp">主题列表</a>
<script type="text/javascript">
	delayURL("目标页面.jsp");
</script>

此方法实现的效果为在上一个页面点击完submit后跳转到本页面经过3秒(这个3会递减到0)后跳转到目标页面。

分享到:
评论

相关推荐

    HTML页面定时跳转方法解析(2种任选)

    有 2 种方法可以实现 html 的定时页面跳转,1、meta refresh 实现。2、JavaScript 实现。 1、通过 meta refresh 实现 3 秒后自动跳转到 http://www.cnblogs.com/wuxibolgs329/ 页面。 &lt;!doctype html&gt; &lt;...

    VC.NET备课笔记.rar

    二、页面间的跳转 三、使用查询字符串 四、添加网页属性 第十四讲 ASP.NET内部对象 一、内部对象概述 二、状态管理和ViewState 三、Application对象 四、Session对象 五、Server对象 第十五讲 ...

    youdaonote-api:有道云笔记-Nodejs 版本API

    youdaonote-api有道云笔记-Nodejs 版本API概述使用oauth2.0,访问有道云笔记API,对笔记、笔记本、资源进行操作。参考安装首先在申请自己的ConsumerKey,之后才可以使用。然后安装模块npm install ydnote即可。使用...

    vscode-[removed]包含VS Code编辑器中用于JavaScript(ES6)开发的代码段

    笔记所有的代码片段都包括最后的分号; @jmsv在创建了这些片段的分支,其中不包括分号。 因此,请根据您的需要随意使用它们。赞助商 从您的IDE内部请求并执行代码审查。 复查任何代码(即使这是尚未提交的正在进行的...

    html入门到放弃笔记

    3、主要技术 1、HTML 2、CSS 3、Javascript 2、HTML入门(重点) 1、什么是HTML Hyper Text Markup Language 超级 文本 标记 语言 超文本 :也是文本,但会具备特殊功能 普通文本 a : 普通字符 a 超文本 a ...

    整理后java开发全套达内学习笔记(含练习)

    goto (保留字) 跳转 heap n.堆 [hi:p] implements (关键字) 实现 ['implimәnt] import (关键字) 引入(进口,输入) Info n.信息 (information [,infә'meiʃәn] ) Inheritance [java] 继承 [in'heritәns] (遗传...

    简易学习社交平台

    随着科学技术的不断提高,计算机科学日渐成熟,其强大的功能已为人们深刻认识。,而互联网为学习者提供了...前端web页面和用户个人信息管理运用Bootstrap框架集合JavaScript和jQuery为用户提供了简介易操作的jsp页面。

    noter-v2:Noter笔记分享平台 V2

    Noter 服务端架构 代码实现 服务端 Node.js:Koa ORM:Sequelize 代码规范 / 格式化:ESLint ...例如未登录——提示并跳转登录页 系统 服务端全局异常处理 路由参数自定义校验 Token 令牌认证机制 鉴权(游

    asp.net知识库

    SharpRewriter:javascript + xml技术利用#实现url重定向 采用XHTML和CSS设计可重用可换肤的WEB站点 asp.net的网址重定向方法的比较:面向搜索引擎友好 也谈 ASP.NET 1.1 中 QueryString 的安全获取写法 ASP.NET运行...

    谷歌师兄的leetcode刷题笔记-redblue:开源超视频播放器

    谷歌师兄的leetcode刷题笔记红蓝 开源超视频框架 稳定 :warning: master分支目前代表 alpha 预发布。 功能和语法随时可能更改,因此请不要在生产中使用它。 除非你是某种胆大妄为的人。 关于 超视频:使用基于时间的...

    deepfreeze-extension:deepfreeze.it 的非官方浏览器扩展

    要构建,请运行: kango.py build path/to/repo/folder/here笔记这个扩展是为了帮助学习 JavaScript,所以代码是大概垃圾。 随意对您看到的任何垃圾代码发出拉取请求。 此外,该扩展程序目前正在直接从抓取数据,...

    microblog:带快递3.x的微博

    欢迎使用马克飞象@(示例笔记本)[马克飞象|帮助|Markdown]马克飞象是一款专为印象笔记(Evernote)打造的Markdown编辑器,通过精心的设计与技术实现,配合印象笔记强大的存储和同步功能,带来前所未有的书写体验。...

    程序员5个刷题网站-Wechat_small_program_Share::books:微信小程序书籍笔记分享,欢迎大家Star:fire:只做学习和交流使用

    程序员5个刷题网站 Wechat_small_program_Share 微信小程序分享:see-no-evil_monkey: Github 欢迎 Star、Fork :check_mark_button: ...《javascript教程》 //app.js App({ onLaunch: function () { // 展示本地

    notepad:奎因·潘(Quinn Pan)的记事本。 这个仓库只记录了如何通过projcet来学习Django

    #如何运行 如果你没有装过python,请记得安装python。推荐是python2.7【下载地址: 安装pip: 教程: 安装Django: 方法:pip install django 这个pip是第二步安装的....如果新建一个笔记那么,会自动跳转

    8086-emulator-web:8086模拟器Web实施的存储库

    笔记 这是一个Intel 8086仿真器,提供了一种运行为8086汇编指令集编写的程序的方法。 这在内部将数据存储在1 MB大小的模拟“内存”中,但是该代码未编译为二进制或存储在内存中。 汇编语句使用解释程序执行,该解释...

    learn-vim:vim基本学习

    Vim 基本功(Learn Vim)本仓库内容Vim基本功学习笔记GitBook:GitHub:GitPage:Something I hope you know before go into the coding~First, please watch or star this repo, I'll be more happy if you follow me....

    PyJudge:简单编程竞赛托管软件

    这是一个正在进行的项目,因此您可以随时跳转! 这是的链接! 前提条件 尽管您可以在几个小时内学习基础知识,但不是必须具备GitHub知识。 在电报组中存在(如果发生错误,请先安装电报,或从桌面加入) 奉献精神 ...

    logseq-plugin-random-walk:logseq 随机漫步插件

    logseq-plugin-random-walk 点击按钮随机跳转一篇笔记 Click the button to jump to a random note Demo Install And Use turn on Logseq developer mode unzip the zip file and load from Logseq plugins page

    leetCode-Js:记录自己用Js刷题的“心酸”历程!!!在线Gitbook地址

    前端笔记: 项目背景 旨在提高自己对算法的理解,将题解总结成文章,有利于未来自查,也希望能对大家有所帮助。 如果该项目能对大家起到积极的作用,就算成功了,欢迎大家留言交流,接受批评和指正~ 通过传送门可以...

    jobscheduler:具有多个优先级的基于Python的可移植,可扩展的作业调度程序-用于ANSYS CFX

    快速笔记 此演示文稿是使用利用的软件包创建的。 类型 '?' 查看键盘快捷键列表。 滑动或使用箭头键/ n /空格进行导航。 水平浏览/滑动主幻灯片 向下导航/向下滑动以查看子幻灯片(如果有) 菜单键(右下角)...

Global site tag (gtag.js) - Google Analytics