当前位置: 首页 > news >正文

HTML页面跳转的5种方法

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

 

 

1
2
3
4
5
6
< head >
<!-- 以下方式只是刷新不跳转到其他页面 -->
< meta http-equiv="refresh" content="10">
<!-- 以下方式定时转到其他页面 -->
< meta http-equiv="refresh" content="5;url=hello.html">
</ head >

优点:简单
缺点:Struts Tiles中无法使用

 

2) javascript的实现

 

1
2
3
4
5
6
<script language= "javascript" type= "text/javascript" >
// 以下方式直接跳转
window.location.href= 'hello.html' ;
// 以下方式定时跳转
setTimeout( "javascript:location.href='hello.html'" , 5000);
</script>

优点:灵活,可以结合更多的其他功能
缺点:受到不同浏览器的影响
3) 结合了倒数的javascript实现(IE)

 

1
2
3
4
5
6
7
8
9
< 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)

1
2
3
4
5
6
7
8
9
<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的问题

 

1
2
3
4
5
6
7
8
< 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
< 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 >

 

转载于:https://www.cnblogs.com/felix-/p/4319833.html

相关文章:

  • ​ssh-keyscan命令--Linux命令应用大词典729个命令解读
  • 应该知道的Linux技巧(转载)
  • Oracle如何查看执行计划
  • python 图片上添加文字
  • 面试题35-第一个值出现依次的字符
  • VIM空格和TAB转换
  • redhat 6 配置 yum 源的两种方法
  • 算法笔记_041:寻找和为定值的多个数(Java)
  • 用外部表的方式查询当天数据库alert日志文件
  • css 如何让背景图片拉伸填充避免重复显示
  • github常用操作
  • Codeforces 768C:Jon Snow and his Favourite Number
  • test
  • 微软职位内部推荐-Software Engineer II
  • 全局变量的声明
  • 【个人向】《HTTP图解》阅后小结
  • CSS居中完全指南——构建CSS居中决策树
  • download使用浅析
  • React-Native - 收藏集 - 掘金
  • SegmentFault 技术周刊 Vol.27 - Git 学习宝典:程序员走江湖必备
  • Spark in action on Kubernetes - Playground搭建与架构浅析
  • storm drpc实例
  • webpack项目中使用grunt监听文件变动自动打包编译
  • Windows Containers 大冒险: 容器网络
  • 阿里云爬虫风险管理产品商业化,为云端流量保驾护航
  • 初探 Vue 生命周期和钩子函数
  • 从重复到重用
  • 分享一份非常强势的Android面试题
  • 浮现式设计
  • 个人博客开发系列:评论功能之GitHub账号OAuth授权
  • 解决iview多表头动态更改列元素发生的错误
  • 前端临床手札——文件上传
  • 实习面试笔记
  • 思否第一天
  • 基于django的视频点播网站开发-step3-注册登录功能 ...
  • ​iOS实时查看App运行日志
  • (11)MSP430F5529 定时器B
  • (4) openssl rsa/pkey(查看私钥、从私钥中提取公钥、查看公钥)
  • (C++17) std算法之执行策略 execution
  • (javascript)再说document.body.scrollTop的使用问题
  • (NO.00004)iOS实现打砖块游戏(十二):伸缩自如,我是如意金箍棒(上)!
  • (PyTorch)TCN和RNN/LSTM/GRU结合实现时间序列预测
  • (SpringBoot)第七章:SpringBoot日志文件
  • (windows2012共享文件夹和防火墙设置
  • (备忘)Java Map 遍历
  • (附源码)springboot“微印象”在线打印预约系统 毕业设计 061642
  • (附源码)基于ssm的模具配件账单管理系统 毕业设计 081848
  • (附源码)小程序 交通违法举报系统 毕业设计 242045
  • (免费领源码)python#django#mysql校园校园宿舍管理系统84831-计算机毕业设计项目选题推荐
  • (深度全面解析)ChatGPT的重大更新给创业者带来了哪些红利机会
  • (四)Tiki-taka算法(TTA)求解无人机三维路径规划研究(MATLAB)
  • (译)计算距离、方位和更多经纬度之间的点
  • (转)Java socket中关闭IO流后,发生什么事?(以关闭输出流为例) .
  • (转)linux下的时间函数使用
  • (转)Oracle存储过程编写经验和优化措施