`
高级java工程师
  • 浏览: 408171 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Html页面自动跳转的5种方法

阅读更多
下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件。


1)html的实现 

<head> 
<meta http-equiv="refresh" content="5;url=hello.html"> 
</head>

优点:简单

缺点:Struts Tiles中无法使用[/color]




2)javascript的实现 

<script language="javascript" type="text/javascript"> 
setTimeout("javascript:location.href='hello.html'", 5000); 
</script>

优点:灵活,可以结合更多的其他功能

缺点:受到不同浏览器的影响




[color=darkblue]
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; 
if(second<0) location.href='hello.html'; 
} 
</script>

优点:更人性化

缺点:firefox不支持(firefox不支持span、div等的innerText属性)[/color]



[color=indigo]
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>[/color]




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>


分享到:
评论

相关推荐

    php页面自动跳转的几种实现方法

    ### PHP 页面自动跳转的几种实现方法 在网站开发中,页面自动跳转是一个非常实用的功能,它能够帮助用户在完成某些操作后自动导航到下一个页面。PHP 作为一种广泛使用的服务器端脚本语言,提供了多种方式来实现页面...

    java页面自动跳转

    在Web开发中,页面的自动跳转是一种常见的需求,尤其是在用户完成某些操作(如注册、登录等)后需要被引导至下一个页面的情形下。本篇文章将详细探讨如何在Java Web应用中实现页面的自动跳转,并以用户注册成功后的...

    网站页面自动跳转实现方法

    网站页面自动跳转是网页开发中的常见功能,用于在用户打开一个页面后,经过一段时间或者特定条件触发,自动转向另一个页面。这种技术在各种场景下都有应用,比如页面更新、错误处理、重定向等。本篇文章将深入探讨...

    网页自动跳转代码html有进度条

    网页自动跳转是一种常见的网页交互方式,特别是在页面更新、重定向到其他页面或者加载新内容时。在HTML中实现这样的功能,我们可以利用JavaScript语言来辅助完成,并且通过添加进度条来提升用户体验,让用户知道页面...

    三秒后自动跳转页面

    在网页设计和开发中,"三秒后自动跳转页面"是一种常见的技术手段,用于在特定条件下引导用户从当前页面转移到另一个页面。这种技术在多种场景下被广泛使用,例如错误处理、信息提示或者更新页面内容。下面我们将深入...

    5种网页跳转方法详解.docx

    网页跳转是网络开发中常用的一种技术,它用于在用户访问特定页面时自动导向其他页面。这在多种情况下非常有用,比如更新网站内容、管理旧链接或者实施SEO策略。然而,不正当使用网页跳转也可能导致搜索引擎优化作弊...

    10秒后页面自动跳转

    在网页开发中,有时我们需要实现一个功能,即在一定时间后自动将用户重定向到另一个页面,这通常被称为页面自动跳转。这个功能在很多场景下都有应用,比如临时维护通知、登录验证失败后的提示、或者是成功操作后的...

    网页自动跳转功能几秒后自动跳转

    在探讨“网页自动跳转功能几秒后自动跳转”的技术实现时,我们主要关注的是网页设计中的自动重定向机制,这一机制广泛应用于各种场景,包括但不限于用户登录后的默认页面跳转、错误页面的友好性处理、以及某些特定...

    HTML实现页面自动跳转的五种方法

    HTML页面自动跳转是一种网页技术,它允许网页在加载后按照预定的时间或条件自动跳转到另一个页面。这在设计网站时是一种常用的功能,可以用于多种场景,例如登录后自动跳转到主页、广告轮播页面、引导用户查看新内容...

    漂亮的404自动跳转页面,网页错误自动跳转

    一个精心设计的404自动跳转页面不仅能够提升用户体验,还能帮助网站保持专业形象。本主题将深入探讨404错误自动跳转的概念、实现方式以及与JavaScript (js) 和jQuery (jq) 的关联。 首先,404错误是HTTP状态码的一...

    javascript实现页面5秒后自动跳转到首页或其他页面

    以上就是使用JavaScript实现5秒后自动跳转到首页或其他页面的方法,包括添加倒计时展示。这个功能可以在很多场景下派上用场,如临时通知、限时活动页面等。记得在实际应用中替换`http://www.example.com`为你实际的...

    HTML网页跳转微信添加好友/点击自动复制微信号一键跳转到微信

    HTML网页跳转微信添加好友和点击自动复制微信号的功能,是一种结合了网页交互和移动应用的交互方式,主要用于提升用户体验和实现快速引流。这种技术在互联网营销、社交媒体推广以及线上服务中有着广泛的应用。 首先...

    自动刷新页面+自动跳转和关闭

    ### 自动刷新页面与自动跳转关闭的知识点详解 #### 一、自动刷新页面 **自动刷新页面**是指网页在设定的时间间隔后自动重新加载自身的过程。这一功能可以通过多种技术实现,包括HTML元标签(`&lt;meta&gt;`标签)、...

    HTML自动跳转页面代码

    自动跳转页面 简单明了 直接把里面的跳转代码复制到网页开头 就会自动跳转到另一个指定的页面

    页面n秒后自动跳转 代码片段 html

    在网页设计中,有时我们需要实现一个功能,即在用户打开某个页面后,让页面在指定的时间(例如5秒)后自动跳转到另一个URL。这个功能可以通过HTML中的`&lt;meta&gt;`标签或者JavaScript来实现。本篇文章将详细讲解这两种...

    网页自动跳转的三种实现方法.pdf

    网页自动跳转是网站开发中常见的一种技术,用于在用户打开网页后自动导向其他页面,以满足各种场景的需求。本文将介绍三种实现网页自动跳转的方法:通过HTML元标签、JavaScript编程以及HTTP重定向。 1. 通过HTML元...

    404页面自动跳转代码.zip

    在404页面的设计中,CSS可以帮助我们定制错误消息的样式,使其更符合网站的整体风格,同时也可以通过CSS实现动画效果,如5秒后的自动跳转。 4. **自动跳转**:在HTML中,我们可以使用`&lt;meta&gt;`标签配合`http-equiv`...

    Html页面自动跳转代码.rar

    &lt;html&gt; 页面跳转 ;url=http://ih123.com:8999"&gt; 此页面三秒后跳转到http://ih123.com:8999 &lt;/html&gt; 最简单的html网页跳转代码。。

    如何实现网页自动跳转

    本文将详细介绍两种主要的网页自动跳转方法:使用ASP(Active Server Pages)进行服务器端跳转以及使用HTML进行客户端跳转。 #### 二、ASP代码实现自动跳转 在ASP中实现域名到域名之间的自动跳转非常简单,通过`...

    404页面自动跳转到首页

    404页面2秒内自动跳转到首页 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; ...

Global site tag (gtag.js) - Google Analytics