`

5种网页跳转方法

    博客分类:
  • html
阅读更多

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

 

 

<head>
<!-- 以下方式只是刷新不跳转到其他页面 -->
<meta http-equiv="refresh" content="10">
<!-- 以下方式定时转到其他页面 -->
<meta http-equiv="refresh" content="5;url=hello.html"> 
</head>

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

 

2 javascript的实现

 

<script language="javascript" type="text/javascript"> 
// 以下方式直接跳转
window.location.href='hello.html';
// 以下方式定时跳转
setTimeout("javascript:location.href='hello.html'", 5000); 
</script>

优点:灵活,可以结合更多的其他功能
缺点:受到不同浏览器的影响
3 A 结合了倒数的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属性)
3 B 结合了倒数的javascript实现(firefox)

<script language="javascript" type="text/javascript"> 
var second = document.getElementById('totalSecond').textContent; 
setInterval("redirect()", 1000); 
function redirect() 
{ 
document.getElementById('totalSecond').textContent = --second; 
if (second < 0) location.href = 'hello.html'; 
} 
</script>

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  整合3A和3B

 

<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>

 

0
0
分享到:
评论

相关推荐

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

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

    h5页面跳转微信小程序(最简单的方法-URL Scheme)

    H5页面跳转微信小程序的需求是普遍存在的。由于微信小程序是一种只能在微信内部访问的应用程序,而H5页面可以在任何浏览器中访问,因此需要通过跳转来实现两者之间的衔接。 对于用户来说,H5页面跳转微信小程序可以...

    JSP页面跳转的五种方法

    JSP页面跳转的五种方法,主要通过RequestDispatcher.forward(),response.sendRedirect()等跳转

    网页自动跳转_5种方法

    网页自动跳转,是指当用户访问某个网页时,被自动跳转到另一个网页中去。 网页自动跳转的主要作用是,当域名变更后,或者网站里的一个或多个网页被删除后,可以使用这种方式将用户引导到其它正常的网页中去,从而...

    JSP中5种跳转的方法

    JSP中简单的实现页面的跳转的;有通过Servlet中的 HttpRequest和HttpResponse跳转,也有重写向跳转,response.sendRedirect(String path)

    HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法

    就想弄一个winform结合html5的一个小东西,突有心血来潮,想在里面嵌套一个微信网页版,下面小编给大家介绍下HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法,一起看看吧

    Pyqt5实现登录、主界面跳转

    Pyqt5实现登录、主界面跳转

    HTML页面跳转的方法

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

    js 控制页面跳转的5种方法

    介绍了js 控制页面跳转的5种方法,有需要的朋友可以参考一下

    Pyqt5 实现跳转界面并关闭当前界面的方法

    网上大部分教程都写的直接关闭界面,...以上这篇Pyqt5 实现跳转界面并关闭当前界面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。 您可能感兴趣的文章:pyqt5使用按钮进

    页面跳转OnClickListener

    页面跳转OnClickListener,描述页面跳转的5种方法

    angularjs项目的页面跳转如何实现(5种方法)

    Angular页面传参有多种办法,根据不同用例,我举5种最常见的: PS: 在实际项目中,请参照https://github.com/johnpapa/angular-styleguide优化您的代码。 1. 基于ui-router的页面跳转传参 (1) 在AngularJS的app....

    小程序跳转到的H5页面再跳转回跳小程序的方法

    主要介绍了小程序跳转到的H5页面再跳转回跳小程序的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    jsp页面跳转

    五种JSP页面跳转方法详解 1. RequestDispatcher.forward() 2. response.sendRedirect() 3. 4. 修改HTTP header的Location属性来重定向 5. JSP中实现在某页面停留若干秒后,自动重定向到另一页面

    HTML页面3秒后自动跳转的三种常见方法

    在练习中,我们常常遇到一种问题就是,怎么实现页面N秒之后自动跳转呢? 我自己遇到问题和查找资料,总结了3个方法 方法1: 最简单的一种:直接在前面&lt;head&gt;里面添加代码: 复制代码代码如下:...

    JSP和HTML跳转.zip_html挑转jsp_jsp和HEML跳转_jsp和HTML跳转

    HTML页面跳转的5种方法 1. html的实现 2.javascript的实现

    PHP页面跳转实现延时跳转的方法

    以上这篇PHP页面跳转实现延时跳转的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。 您可能感兴趣的文章:PHP生成唯一订单号的方法汇总php生成唯一的订单函数分享PHP...

    JavaScript实现页面5秒后自动跳转的方法

    这个JavaScript控制页面5秒后自动跳转的代码在很多开发中经常需要用到,感兴趣的朋友可以收藏一下! &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"/&gt; &lt...

    pyqt5使用按钮进行界面的跳转方法

    今天小编就为大家分享一篇pyqt5使用按钮进行界面的跳转方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

Global site tag (gtag.js) - Google Analytics