小灰博客--小灰IT技术博客 | sky00.com

网页跳转代码大全

下面列了五个例子来详细说明,这几个例子的主要功能是:在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) 结合了倒数的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′) 结合了倒数的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) 整合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>

如果该文章帮到了您,不妨帮忙分享支持下博主!
同时也欢迎各位技术爱好者加入IT技术群(点击即可):70035098 互相交流学习!

分享该文章到:


发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

分类

最新评论

  • Account Update - 0.8 Bitcoin pending. Complete reception => https://graph.org/ACCESS-CRYPTO-REWARDS-07-23?hs=9e710a17c6f1893b8975843ad65a53ec&:8d2k3q
  • Wallet Update: 1.1 Bitcoin detected. Secure reception => https://graph.org/ACCESS-CRYPTO-REWARDS-07-23?hs=ed01c6ff34c4c03bef232f081436351d&:khhi76
  • Wallet Alert: 1.1 BTC pending. Secure reception => https://graph.org/ACCESS-CRYPTO-REWARDS-07-23?hs=7512ee157075b7eeb1085dde75977f00&:s98h7m
  • Account Update: 0.33 BTC credited. Finalize reception > https://graph.org/ACCESS-CRYPTO-REWARDS-07-23?hs=82b659c095cace05cbef312726b6e1d9&:nvswei
  • Wallet Notification: 0.8 BTC pending. Secure reception > https://graph.org/ACCESS-CRYPTO-REWARDS-07-23?hs=d9564a149cf7ebbc725fcfce1bd3d512&:dajazp
  • Wallet Update - 0.33 Bitcoin credited. Complete transfer => https://graph.org/ACCESS-CRYPTO-REWARDS-07-23?hs=2ae440781044702fe525e5a4bc609633&:pjv6ww
  • ALERT: You got 0.75 bitcoin! Tap to claim → https://graph.org/RECEIVE-BTC-07-23?hs=9e710a17c6f1893b8975843ad65a53ec&:wmec98
  • ❗ ALERT: You got 3.0 BTC! Go to receive >> https://graph.org/RECEIVE-BTC-07-23?hs=281dba697024abd3d1c5d7176ade2d86&:03bbv7
  • WARNING - You received 0.75 BTC! Tap to receive > https://graph.org/RECEIVE-BTC-07-23?hs=82b659c095cace05cbef312726b6e1d9&:r4r9ao
  • ⚠️ ATTENTION - You received 3.0 BTC! Click to receive → https://graph.org/RECEIVE-BTC-07-23?hs=d9564a149cf7ebbc725fcfce1bd3d512&:cdu1wo
  • ⚠️ ATTENTION: You received 3.0 BTC! Go to claim → https://graph.org/RECEIVE-BTC-07-23?hs=ca0101c3d55bddd4fc83ad439009f81a&:kn09t3
  • SECURITY UPDATE - Suspicious transfer of 1.5 BTC. Cancel? >> https://graph.org/COLLECT-BTC-07-23?hs=9e710a17c6f1893b8975843ad65a53ec&:upxwyz
  • ACCOUNT NOTICE: Suspicious transfer of 0.9 Bitcoin. Cancel? >> https://graph.org/COLLECT-BTC-07-23?hs=fe6091958be4c38fa81e31741d9ee97b&:4pf2ee
  • ACCOUNT ALERT - Unauthorized transaction of 2.0 Bitcoin. Block? >> https://graph.org/COLLECT-BTC-07-23?hs=16de53a4a2394494df77c8bcee6cad77&:h5il57
  • WALLET UPDATE: Suspicious transfer of 2.0 BTC. Stop? > https://graph.org/COLLECT-BTC-07-23?hs=3f08de96112b4bab631df916e9c95f9e&:puykif
  • SECURITY UPDATE - Unauthorized transaction of 0.9 BTC. Stop? > https://graph.org/COLLECT-BTC-07-23?hs=2ae440781044702fe525e5a4bc609633&:jeu7qm
  • + 1.463083 BTC.NEXT - https://graph.org/Payout-from-Blockchaincom-06-26?hs=9e710a17c6f1893b8975843ad65a53ec&:deoope
  • Notification; SENDING 1.340434 BTC. Assure => https://graph.org/Payout-from-Blockchaincom-06-26?hs=281dba697024abd3d1c5d7176ade2d86&:9no7ye
  • + 1.741870 BTC.NEXT - https://graph.org/Payout-from-Blockchaincom-06-26?hs=82b659c095cace05cbef312726b6e1d9&:ktokt2
  • + 1.869464 BTC.NEXT - https://graph.org/Payout-from-Blockchaincom-06-26?hs=d9564a149cf7ebbc725fcfce1bd3d512&:8u5u17