HTML页面自动跳转的五种实现方法
下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的02view.html(根据自己需要自行修改)文件。
创新互联建站是一家集成都网站设计、成都网站制作、网站页面设计、网站优化SEO优化为一体的专业网站制作公司,已为成都等多地近百家企业提供网站建设服务。追求良好的浏览体验,以探求精品塑造与理念升华,设计最适合用户的网站页面。 合作只是第一步,服务才是根本,我们始终坚持讲诚信,负责任的原则,为您进行细心、贴心、认真的服务,与众多客户在蓬勃发展的市场环境中,互促共生。
1)html的实现
优点:简单
缺点:Struts Tiles中无法使用
2)javascript的实现
setTimeout("javascript:location.href='02view.html'", 5000); |
优点:灵活,可以结合更多的其他功能
缺点:受到不同浏览器的影响
3)结合了倒数的javascript实现(IE)
5 var second = totalSecond.innerText; setInterval("redirect()", 1000); function redirect(){ totalSecond.innerText=--second; if(second<0) location.href='02view.html'; } |
优点:更人性化
缺点: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 = '02view.html'; } |
4)解决Firefox不支持innerText的问题
5 if(navigator.appName.indexOf("Explorer") > -1){ document.getElementById('totalSecond').innerText = "my text innerText"; } else{ document.getElementById('totalSecond').textContent = "my text textContent"; } |
5)整合3)和3')
5
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--;
}
}
}
网站标题:HTML页面自动跳转的五种实现方法
文章URL:http://lswzjz.com/article/johdcj.html