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. 【BZOJ-3709】Bohater 贪心

    3709: [PA2014]Bohater Time Limit: 5 Sec  Memory Limit: 128 MBSec  Special JudgeSubmit: 835  Solved:  ...

  2. 【BZOJ-1040】骑士 树形DP + 环套树 + DFS

    1040: [ZJOI2008]骑士 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3312  Solved: 1269[Submit][Status ...

  3. eclipse中项目右上方有一个s,eclipse中项目左下方友谊个红色的叉,eclipse中项目左下方友谊个红色的感叹号

    S,这个猜测使用了Spring tools 然后可以方便的建立xml配置文件,然后平时不用在意 红的叉,这个可能是tomcat没有的不合适,可以在properties里面的找到runtime然后改成合 ...

  4. SQL Server修改代理作业的下次运行时间

    有这个现象,如果我把服务器时间调快2天运行作业,那么会发现作业的下次运行时间会变成两天+1的时间,即使是把服务器时间调正常后,这个下次运行时间也是无法调回来的 那么,要修改会正常的下次作业时间,可以这 ...

  5. Redis未授权访问漏洞分析

    catalog . Redis简介 . 漏洞概述 . 漏洞利用方式 . 修复方式 1. Redis简介 Relevant Link: http://www.cnblogs.com/LittleHann ...

  6. 最小生成树问题---Prim算法与Kruskal算法实现(MATLAB语言实现)

    2015-12-17晚,复习,甚是无聊,阅<复杂网络算法与应用>一书,得知最小生成树问题(Minimum spanning tree)问题.记之. 何为树:连通且不含圈的图称为树. 图T= ...

  7. soapUI使用-DataSource获取oracle库中的参数

    soapUI使用-DataSource获取oracle库中的参数 下载mysql和oracle驱动包:http://pan.baidu.com/s/1i3sy1MH 放在Program Files\S ...

  8. RNN 入门教程 Part 2 – 使用 numpy 和 theano 分别实现RNN模型

    转载 - Recurrent Neural Networks Tutorial, Part 2 – Implementing a RNN with Python, Numpy and Theano 本 ...

  9. Low Power Consumption Design --- MCU Attention

    20161008 note : I have a PCB board called 'A' where a piece of STM8L052C6 and a piece of CC1101 are ...

  10. Extjs GridPanel用法详解

    Extjs GridPanel 提供了非常强大数据表格功能,在GridPanel可以展示数据列表,可以对数据列表进行选择.编辑等.在之前的Extjs MVC开发模式详解中,我们已经使用到了GridPa ...