盘点HTML页面跳转的5种方法
转载自品略图书馆 http://www.pinlue.com/article/2019/03/2517/088405825053.html
下面列了五个例子来详细说明,这几个例子的主要功能是:在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>
盘点HTML页面跳转的5种方法相关推荐
- 本地html自动跳转,HTML页面跳转的5种方法
下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件. 1) html的实现 优点:简单 缺点:Struts Tiles中 ...
- js 控制页面跳转的5种方法
js 控制页面跳转的5种方法 编程式导航: 点击跳转路由,称编程式导航,用js编写代码跳转. History是bom中的History.back是回退一页Histiory.go(1)前进一页Histo ...
- 视频直播网站源码,uniapp页面跳转的几种方法和区别
视频直播网站源码,uniapp页面跳转的几种方法和区别 保留当前页面,可跳转到非 tabBar 页面,使用uni.navigateBack可以返回到原页面(可传参) uni.navigateTo({u ...
- JS 实现页面跳转的几种方法
JS 实现页面跳转的几种方法 要实现从一个页面A跳到另一个页面B,js实现就在A的js代码加跳转代码 JS跳转大概有以下几种方式: 第一种:(跳转到b.html) <script languag ...
- js中实现页面跳转的几种方法
按钮式: 1 <INPUT name="pclog" type="button" value="GO" onClick="l ...
- php实现页面跳转的几种方法(实例分享)
发布:theboy 来源:net [大 中 小] 转自:http://www.jbxue.com/article/2366.html php 页面跳转的几种方法 方法一.header()函 ...
- Jsp页面跳转和js控制页面跳转的几种方法
Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...
- JQuery实现页面跳转 页面跳转的七种方法
<mce:script type="text/javascript"><!-- $(function(){ var pn = $("#gotopagen ...
- php页面跳转的方法,PHP实现页面跳转的四种方法
PHP实现页面跳转的四种方法 发布时间:2020-05-20 11:36:01 来源:亿速云 阅读:172 作者:Leah 今天小编就为大家分享PHP实现页面跳转的四种方法.小编觉得挺实用的,为此分享 ...
- php跳转代码循环,PHP页面跳转代码几种方法
在php中要实现跳转有很多方法,最常规的跳转方法就是使用header函数来操作了,当然也可以在php中输入js跳转形式,下面我来给大家介绍一下. PHP 跳转 代码如下 复制代码 header(&q ...
最新文章
- 安卓版文字扫描识别软件
- 嵌入式驱动开发之2440/2410---硬件看门狗,喂狗
- collection集合 地址_java.util包下的集合
- 【Ubuntu】通过虚拟机安装系统( ubuntu )
- JSON指针:JSON-P 1.1概述系列
- 单片机c语言篮球比分_基于单片机的篮球比赛计时计分器的设计
- lambda 表达式定制操作
- 每天学一点flash(11) as3.0 与asp 通信 (1)
- 闲鱼公布2021年度十大“无用”商品:网友买前壮志 买后吃灰
- 剑指offer:矩阵中的路径(递归回溯法DFS类似迷宫)
- JSK-115 单独的数字(二)【位运算】
- 无法启动WORKSTATION服务解决方案
- js-js数据结构和算法-递归思想-斐波那契数-动态规划-贪心
- OPENWRT路由器设置
- vscode 扩展 本地_使用众包扩展产品本地化
- 字节跳动 Java 岗一二三面全经过分享
- 算法作业 (三)——— 装箱问题
- 2022年,反思你的 HRIS 是不是为绩效管理而构建
- 小苹果歌词――筷子兄弟
- 安装awvs14.7
热门文章
- C语言 从入门到放弃
- 当前日期或 *(星号)显示在 think-cell 标签中
- 永磁同步电机dq坐标系中转矩公式中系数3/2的由来
- H3C V7控制器无线优化关闭低速率
- c语言串口调试助手源码,串口调试工具 1.02 (软件 + 源码)
- 阿里云跨境电商企业出海最佳实践及数字化解决方案
- 华为大数据解决方案(PPT)
- Hyper-V虚拟机和虚拟化服务器区别
- android小米便签源代码分析,小米开源便签Notes-源码研究(1)-导出功能整体思路
- QT QDir(获取当前路径下的所有文件)