页面自动跳转 - haoxx

功能：5秒后，自动跳转到同目录下的02view.html文件

　　1）html的实现

双击代码全选

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

双击代码全选
1 2 3 4 5	`<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>

双击代码全选
1 2 3 4 5	`<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>

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17	`<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>

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17	`<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>

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15	`<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'）

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57	`<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--;` 　　　　　　　　　　　 `}` 　　　　　　　 `}` 　　　 `}`

posted on 2012-04-17 18:41 haoxx 阅读(1005) 评论(0) 编辑收藏举报