WEB开发中经常会遇到页面跳转或延时跳转的需求,掌握各种页面跳转方式非常必要。

以下是我总结有用HTML/JS/PHP三类方式实现跳转的方法,例子皆为三秒后跳转到index.php 页面。

1,HTML 方法:

在 HEAD 中添加 <meta> 标签

<meta http-equiv=”refresh” content=”3;url=’index.php’” >

2,JS 控制跳转方法

A.Location 直接加链接方式

<script type="text/javascript">

  setTimeout("window.location=('index.php'",3000);

</script>

B.Location.href 方式

<script type="text/javascript">

  setTimeout("window.location.href='index.php'",3000);

</script>

C.Location.assign 方式

<script type="text/javascript">

  setTimeout("window.location.assign('index.php')",3000);

</script>

D.Location.replace 方式(注意页面是被“替换”掉了,不会在浏览器的历史记录被查询到)

<script type="text/javascript">

  Widdow.location.replace(‘index.php’);

</script>

E.JS 历史记录 go(n) 方式( n 表示对历史记录相对当前页的前进步数, n 为负数表示返回以前的页面)

<script type="text/javascript">

  window.history.go(n);

</script>

F.JS 历史记录 go(url) 方式(注意 url 必须是历史记录内的,不然页面不会进行跳转)

<script type="text/javascript">

  window.history.go(‘index.php’);

</script>

G.JS window.open 方式,通过打开一个新窗口,实现跳转。(其第二个属性为可选目标选项,值可以是 frame id/_blank 等,第三个选项为新弹出窗口的具体设置选项,包括 height/width 等)

<script type="text/javascript">

  setTimeout("window.open('index.php',target,args)",3000);

</script>

3 , PHP 脚本控制跳转方式,通过改写 HTTP 头信息来进行跳转

A.header refresh 方式:

Header(“refresh:3;url=’index.php’”);

B. header location 方式 :

sleep(3);

Header(“location:index.php”);

要注意这种方式会导致无法进入当前页面。即若当前在 register.php 页面链接到login.php 页面时, login.php 页面内用 header location 方式跳转,页面会从register.php 页面直接等待三秒跳转到 index.php ,不会进入到 login.php 页面,这是因为 header location 会对页面进行重定向。

如有错误,欢迎指正,谢谢。

用HTML/JS/PHP方式实现页面延时跳转的更多相关文章

  1. js实现两个页面之间跳转参数传递

    html在设计时,规定跳转地址后加"?"表示从此开始为跟随页面地址跳转的参数. 有时候,我们希望获得相应的跳转前页面里的内容,这时候我们就可以考虑将内容以参数形式放到地址中传过来, ...

  2. a标签根据js返回值判断页面是否跳转

    a标签再跳转之前先判断是否符合条件,符合可以跳转,不符合不可以跳转. 自己遇到的问题是:在js方法中根据条件就return结果,但是不行. 原因是:在js方法中return后不会结束整个js方法(ac ...

  3. JS提交表单页面不跳转、JS下载、动态创建from

    JS下载 function downloadFile(id) {     var url =  "<%=request.getContextPath()%>/cer/downlo ...

  4. PHP JS HTML ASP页面跳转代码 延时跳转代码 返回到上一界面并刷新 JS弹出指定大小的新窗口

    1.PHP延时跳转代码 //跳转到浏览界面 header("Refresh:1;url=machine_list.php"); //不延时 <?php header(&quo ...

  5. js 在iframe子页面获取父页面元素,或在父页面 获取iframe子页面的元素的几种方式

    用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 ...

  6. JS——三种嵌入页面的方式

    一 行间事件 二 页面script标签嵌入 三 外部引入 <!DOCTYPE html> <html lang="en"> <head> < ...

  7. PHP JS HTML ASP页面跳转代码 延时跳转代码

    1.PHP延时跳转代码 //跳转到浏览界面 header("Refresh:1;url=machine_list.php"); //不延时 <?php header(&quo ...

  8. js页面刷新跳转的几种方式及区别

    跳转常用方法: window.location.href="index.php"; window.history.back(-1);//类似于按钮,参数是负几,就后退几次. win ...

  9. js同步、异步、延时、无阻塞加载

    一.同步加载 平常默认用的都是同步加载.如:<script src="http://yourdomain.com/script.js"></script> ...

随机推荐

  1. OPENGL——背面剔除

    Opengl 表面剔除是提高 Opengl 程序渲染效率的一个有效途径. 我们知道,OpenGL 渲染的基本单位是一个个的三角形面片.无论多么复杂的3D 模 型都是由一个个基本的三角型的面片组成的. ...

  2. [日常训练]article

    Description 小今天来写作文啦! 小非常善于堆砌辞藻.在洋洋洒洒写了一长篇之后,小发现作文中很多段落都似曾相识.小认为,如果一段字符在文章开头,结尾和中间都出现过,那么这段字符就可以被认为是 ...

  3. js-JavaScript高级程序设计学习笔记9

    依然第十三章 事件 1.页面上的所有元素都支持鼠标事件,除了mouseenter和mouseleave,所有鼠标事件都会冒泡. 2.修改键:shift.ctrl.alt.meta.四个属性表示修改键的 ...

  4. 【BZOJ-1857】传送带 三分套三分

    1857: [Scoi2010]传送带 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 1077  Solved: 575[Submit][Status][ ...

  5. 【poj2478】 Farey Sequence

    http://poj.org/problem?id=2478 (题目链接) 题意 求分母小于等于n的真分数的个数. Solution 现在只能做做水题了,唉,思维僵化. 细节 前缀和开LL 代码 // ...

  6. POJ3048 Max Factor

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  7. 关于gcd的几个问题

    这两天刷了几个关于gcd的很类似的问题,总结一下: BZOJ2818 1<=x<=n,1<=y<=n,求满足gcd(x,y)=质数的个数 BZOJ2190 1<=x< ...

  8. app 摇一摇功能

    1.重写canBecomeFirstResponder ,并返回YES -(BOOL)canBecomeFirstResponder{ return YES; } 2.重写UIResponder的三个 ...

  9. 重温布局(display)

    无聊,从新复习了一遍,基础布局,记录一下,避免忘了. 首先说一下 Css文件前缀 Firefox:-moz-box-shadow Safari:-webkit-box-shadow Opera:-o- ...

  10. 加州大学伯克利分校Stat2.2x Probability 概率初步学习笔记: Section 4 The Central Limit Theorem

    Stat2.2x Probability(概率)课程由加州大学伯克利分校(University of California, Berkeley)于2014年在edX平台讲授. PDF笔记下载(Acad ...