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

最新推荐文章于 2024-07-26 09:48:32 发布

Coding-lover

最新推荐文章于 2024-07-26 09:48:32 发布

阅读量1.8k

点赞数

分类专栏： javascript xhtml

xhtml 同时被 2 个专栏收录

50 篇文章 1 订阅

订阅专栏

javascript

41 篇文章 0 订阅

订阅专栏

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

1）html的实现

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

优点：简单

缺点：Struts Tiles中无法使用

2）javascript的实现

<script language="javascript" type="text/javascript">
     setTimeout("javascript:location.href='02view.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;
		if (second < 0)
			location.href = '02view.html';
	}
</script>

优点：更人性化

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

3'）结合了倒数的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 = '02view.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）整合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 = '02view.html';
		} else {
			if (navigator.appName.indexOf("Explorer") > -1) {
				document.getElementById('totalSecond').innerText = second--;
			} else {
				document.getElementById('totalSecond').textContent = second--;
			}
		}
	}	
</script>