HTML 页面跳转的五种方法

H方法TML 页面跳转的五种方法

下面列了五个例子来详细说明，这几个例子的主要功能是：在5秒后，自动跳转到同目录下的hello.html（根据自己需要自行修改）文件。
1) html的实现

优点：简单
缺点：Struts Tiles中无法使用

2) javascript的实现

<script language="javascript" type="text/javascript">

// 以下方式直接跳转

window.location.href='hello.html';

// 以下方式定时跳转

setTimeout("javascript:location.href='hello.html'", 5000);

</script>

优点：灵活，可以结合更多的其他功能
缺点：受到不同浏览器的影响

3) 结合了倒数的javascript实现（IE）

<span id="totalSecond">5</span>

<script language="javascript" type="text/javascript">

var second = totalSecond.innerText;

setInterval("redirect()", 1000);

function redirect()

{

totalSecond.innerText=--second;

f(second<0) location.href='hello.html';

}

</script>

优点：更人性化
缺点：firefox不支持（firefox不支持span、div等的innerText属性）

3') 结合了倒数的javascript实现（firefox）

4) 解决Firefox不支持innerText的问题

<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript">
if(navigator.appName.indexOf("Explorer") > -1)

{
document.getElementById('totalSecond').innerText = "my text innerText";
} else{
document.getElementById('totalSecond').textContent = "my text textContent";
}
</script>

5) 整合3)和3')

<span id="totalSecond">5</span>

<script language="javascript" type="text/javascript">
var second = document.getElementById('totalSecond').textContent;

if (navigator.appName.indexOf("Explorer") > -1) {
    second = document.getElementById('totalSecond').innerText;
} else {
    second = document.getElementById('totalSecond').textContent;
}

setInterval("redirect()", 1000);
function redirect() {
if (second < 0) {
    location.href = 'hello.html';
} else {
    if (navigator.appName.indexOf("Explorer") > -1) {
        document.getElementById('totalSecond').innerText = second--;
    } else {
        document.getElementById('totalSecond').textContent = second--;
    }
}
}
</script>

HTML 页面跳转的五种方法的更多相关文章

HTML实现页面自动跳转的五种方法
下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件. 1)html的实现复制代码代码如下: <head> ...
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
1.meta标签实现只需在head里加上下面这一句就行了,在当前页面停留0.1秒后跳转到目标页面代码如下复制代码 1 <meta http-equiv="refresh&quo ...
js 控制页面跳转的5种方法
js 控制页面跳转的5种方法编程式导航: 点击跳转路由,称编程式导航,用js编写代码跳转. History是bom中的 History.back是回退一页 Histiory.go(1)前进一页 Hi ...
Jsp页面跳转和js控制页面跳转的几种方法
Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...
Flex页面跳转的五种实现方式
Flex页面跳转有很多值得学习的地方,本文向大家介绍一下Flex页面跳转的几种方式,主要包括五种方式,这里为大家一一介绍. AD: 在学习Flex的过程中,你可能会遇到Flex页面跳转的概念,这里 ...
实现网页页面跳转的几种方法大全(meta标签、js实现、php实现)
1.meta标签实现只需在head里加上下面这一句就行了,在当前页面停留0.1秒后跳转到目标页面代码如下复制代码 1 <meta http-equiv="refresh&quo ...
ASP&period;NET页面跳转的三种方法比较
在ASP.NET下,经常需要在页面之间跳转,下面我们来分别介绍一下关于.NET中Response.Redirect(),Sever.Execute(),Server.Transfer() 三种页面跳转 ...
jquery/js/a标签实现当前页面跳转的两种方法
在逛购物网站首页时经常看到侧边导航栏,当我们点击导航栏中某一项时会跳转到当前页面的某一处有两种方法实现,一种是利用js计算好各位置的高度,通过绑定事件使页面跳转到指定位置,另一种是利用a标签进行当前 ...
HTML页面跳转的5种方法
下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件.1) html的实现 <head> <!-- 以下 ...

随机推荐

javascrit原生实现jquery的append()函数
/** * javascrit原生实现jquery的append()函数 * @param parent * @param text */ function append(parent, text) ...
2、C&num;面向对象：封装、继承、多态、String、集合、文件（上）
面向对象封装一.面向对象概念面向过程:面向的是完成一件事情的过程,强调的是完成这件事情的动作. 面向对象:找个对象帮你完成这件事情. 二.面向对象封装把方法进行封装,隐藏实现细节,外部直接调用. ...
C&num; 通过反射来动态创建泛型类型
C# 通过反射来动态创建泛型类型与创建普通类型的区别在于:泛型参数的处理创建泛型类型存在三种情况: 第一种:知道泛型类型,但需要动态指定泛型参数: 第二种:知道泛型参数,但需要动态创建指定参数的泛型 ...
BZOJ 3211 题解
3211: 花神游历各国 Time Limit: 5 Sec Memory Limit: 128 MBSubmit: 2549 Solved: 946[Submit][Status][Discus ...
gameObject, vector and transform
调用其它组件中成员通过GameObject(游戏物体). Base class for all entities in Unity scenes. 是Unity场景里面所有实体的基类. 可以理解为 ...
Kcptun 是一个非常简单和快速的，基于KCP 协议的UDP 隧道，它可以将TCP 流转换为KCP+UDP 流
本博客曾经发布了通过 Finalspeed 加速 * 的教程,大家普遍反映能达到一个非常不错的速度.Finalspeed 虽好,就是内存占用稍高,不适合服务器内存本来就小的用户:而 ...
通过日期在js中求出判断间隔天数，周期等实现分享
在我们在项目的时候,可能出现这样的一种情况,有一个开始时间和一个结束时间,而这两个时间用$('#StartTime').val(); 取出来的时候又是datetime 类型,我们需要求这个时间中的间隔 ...
让你的Javascript提升70&percnt;性能
现在的JavaScript代码要进行性能优化,通常使用一些常规手段,如:延迟执行.预处理.setTimeout等异步方式避免处理主线程,高大上一点的会使用WebWorker.即使对于WebWorker ...
gulp+babel面向未来变成
1.需要本地安装node; 2.安装gulp: 3.在项目根目录启动node; 安装babel组件: npm install --save-dev babel-core npm install --s ...
kubernetes-整体概述和架构
1.Kubernetes是什么 Kubernetes是一个轻便的和可扩展的开源平台,用于管理容器化应用和服务.通过Kubernetes能够进行应用的自动化部署和扩缩容.在Kubernetes中,会将组 ...