关于HTML页面跳转的5种方法分享。
转自:微点阅读 https://www.weidianyuedu.com
五个例子来详细说明,这几个例子的主要功能是:在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页面跳转的五种方法分享。
下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件. 1) html的实现 1 2 3 4 5 6 <head&g ...
- HTML页面跳转的5种方法分享
转自:微点阅读 https://www.weidianyuedu.com 下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改 ...
- 本地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 ...
最新文章
- MySQL 5.5 服务器变量详解(二)
- 第十六届全国大学生智能汽车竞赛总决赛 AI视觉组线上赛细则草案 - 初步版本
- 90后大龄女考研二战失败 该何去何从
- DL之BigGAN:利用BigGAN算法实现超强炸天效果——画风的确skr、skr、skr,太特么的skr了
- sql语法中 什么值需要用单引号‘’修饰?
- CSDN博文编辑技巧-如何去除上传的图片水印
- 朋友公司招聘用的一套C#基础面试题,10个码农8个错2个蒙,我也跳坑了…
- Weblogic(4)—— Linux环境Weblogic12c配置节点管理(nodemanage.properties)来开启应用服务器(server)及线程池配置...
- 【Pytorch】expand()用法==》扩展某个维度
- 活动目录数据库重定向或迁移
- 剑指offer——29.顺时针打印矩阵(不熟)
- F#基础教程 unit类型
- keil5图标变成白色_【网上最简单】Chrome安装后打不开任何页面 amp; 改名后图标变成小白块[30秒解决]...
- 如何在外网访问家里电脑上的文件?
- HTML网页设计结课作业——11张精美网页 html+css+javascript+bootstarp
- 怎么用python画天气图_Python气象绘图教程(十五)—Cartopy_5
- 在线UTF-8转换成GBK工具
- 手机html像素,手机分辨率和网页中的PX是一回事吗?
- HRBUST1313-火影忍者之~静音
- PCL 点云配准衡量指标
热门文章
- 蓝鸽智慧计算机教室云服务平台操作说明,智慧教室操作说明.PDF
- DFT频谱泄漏的数学分析及不产生泄漏的条件
- Caused by: java.io.IOException: ZIP entry size is too large
- 关闭linux终端发出的烦人提示音
- 华为USB线刷工具的使用
- 迁移学习—Geodesic Flow Kernel for Unsupervised Domain Adaptation
- python libusb_使用python开发usb的两种方式(windriver与pyusb)
- 车架号校验 php代码,VIN车辆识别代码查询(精准版)
- fterm 控制台乱码解决
- 打印时电脑蓝屏或重启的解决办法