HTML实现页面跳转的几种方法

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

1) html的实现

<head>

</head>

优点：简单

缺点：Struts Tiles中无法使用

2) javascript的实现

// 以下方式直接跳转

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

// 以下方式定时跳转

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

</script>

优点：灵活，可以结合更多的其他功能

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

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

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") 结合了倒数的javascript实现（firefox）

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的问题

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

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>

文章来源：微点阅读 https://www.weidianyuedu.com

HTML实现页面跳转的几种方法相关推荐

本地html自动跳转,HTML页面跳转的5种方法
下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件. 1) html的实现优点:简单缺点:Struts Tiles中 ...
js 控制页面跳转的5种方法
js 控制页面跳转的5种方法编程式导航: 点击跳转路由,称编程式导航,用js编写代码跳转. History是bom中的History.back是回退一页Histiory.go(1)前进一页Histo ...
视频直播网站源码，uniapp页面跳转的几种方法和区别
视频直播网站源码,uniapp页面跳转的几种方法和区别保留当前页面,可跳转到非 tabBar 页面,使用uni.navigateBack可以返回到原页面(可传参) uni.navigateTo({u ...
JS 实现页面跳转的几种方法
JS 实现页面跳转的几种方法要实现从一个页面A跳到另一个页面B,js实现就在A的js代码加跳转代码 JS跳转大概有以下几种方式: 第一种:(跳转到b.html) <script languag ...
js中实现页面跳转的几种方法
按钮式: 1 <INPUT name="pclog" type="button" value="GO" onClick="l ...
php实现页面跳转的几种方法(实例分享)
发布:theboy 来源:net [大中小] 转自:http://www.jbxue.com/article/2366.html php 页面跳转的几种方法方法一.header()函 ...
Jsp页面跳转和js控制页面跳转的几种方法
Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...
JQuery实现页面跳转页面跳转的七种方法
<mce:script type="text/javascript"><!-- $(function(){ var pn = $("#gotopagen ...
php页面跳转的方法,PHP实现页面跳转的四种方法
PHP实现页面跳转的四种方法发布时间:2020-05-20 11:36:01 来源:亿速云阅读:172 作者:Leah 今天小编就为大家分享PHP实现页面跳转的四种方法.小编觉得挺实用的,为此分享 ...
php跳转代码循环,PHP页面跳转代码几种方法
在php中要实现跳转有很多方法,最常规的跳转方法就是使用header函数来操作了,当然也可以在php中输入js跳转形式,下面我来给大家介绍一下. PHP 跳转代码如下复制代码 header(&q ...

HTML实现页面跳转的几种方法

HTML实现页面跳转的几种方法相关推荐

最新文章

热门文章