HTML页面跳转的5种方式

下面列了五个例子来详细说明,这几个例子的主要功能是:在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-1) javascript的实现[location.href]

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

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

优点:灵活,可以结合更多的其他功能
缺点:受到不同浏览器的影响

2-2) 结合了倒数的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>

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

优点:更人性化
缺点:firefox不支持(firefox不支持span、div等的innerText属性)

2-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>

2-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>

2-5) 兼容IE和FF的带有倒数的跳转

<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>
时间: 2024-10-12 03:49:29

HTML页面跳转的5种方式的相关文章

JavaScript实现页面跳转的五种方式

JavaScript实现页面跳转的五种方式 第一种:<script type="text/javascript" language="javascript"> window.location.href="login.jsp?backurl="+window.location.href;</script> 第二种:<script type="text/javascript" language=&qu

实现前端页面跳转的几种方式

实现前端页面跳转的几种方式 推荐使用 <script language='javascript'> document.location = 'http://mail.qq.com/domain/longtimenosee.cc' </script> 相关阅读 http://www.jb51.net/article/25403.htm http://my.oschina.net/ososchina/blog/340854

php页面跳转的几种方式

@: PHP页面跳转的三种方式 第一种方式:header() header()函数的主要功能是将HTTP协议标头(header)输出到浏览器. 语法: void header ( string $string [, bool $replace = true [, int $http_response_code ]] ) 可选参数replace指明是替换前一条类似标头还是添加一条相同类型的标头,默认为替换. 第二个可选参数http_response_code强制将HTTP相应代码设为指定值. he

web项目中实现页面跳转的两种方式

<a href="javascript:"></a>跳转在网页本身,URL不改变 <a href="#"></a> 跳转在网页本身,URL 改变 java web项目中实现页面跳转的主要方式有两种:第一种,<% response.sendRedirect("index.jsp");%>第二种<jsp:forward page="index.jsp"/>我做

php中实现页面跳转的几种方式

亲测,not复制粘贴 PHP中实现页面跳转有一下几种方式,看了几个人写的不是很条理,自己整理一下 在PHP脚本代码中实现 <?php header("location:url地址") ?> 例如 <?php header("location:helloworld.php")?> 页面会立即跳转,因为header执行了location重定向 延迟跳转(比如登陆成功后会有几秒钟等待时间,然后跳转到了其他页面) <?php header(&q

PHP 页面跳转的三种方式

第一种方式:header() header()函数的主要功能是将HTTP协议标头(header)输出到浏览器. 语法: void header ( string $string [, bool $replace = true [, int $http_response_code ]] ) 可选参数replace指明是替换前一条类似标头还是添加一条相同类型的标头,默认为替换. 第二个可选参数http_response_code强制将HTTP相应代码设为指定值. header函数中Location类

用js实现页面跳转的几种方式

通过js或者html或者PHP等动态程序都可以方便的实现跳转,这里搜集了几种页面跳转的方式 js方式的页面跳转 1.window.location.href方式 <script language="JavaScript" type="text/javascript"> window.location.href="http://www.dayanmei.com/"; </script> 2.window.navigate方式

页面跳转的几种方式

第一种: <script language="javascript"> window.location.href="index.php"; //比较常用的方法,没什么可解释的,后面直接跟指定要跳转的地方. </script> 第二种: <script language="javascript"> alert("返回"); window.history.back(-1); //类似于按钮,参数

js实现页面跳转的两种方式

CreateTime--2017年8月24日08:13:52Author:Marydon 方式一: window.location.href = url 说明:我们常用来在js中实现页面跳转的方法,使用get方式发送请求,传参有限 更多介绍,见文章:js操作当前窗口 方式二: 通过POST请求实现页面跳转 /** * 发送POST请求跳转到指定页面 * @param URL * 跳转路径 * @param PARAMS * 参数:格式-JSON对象 */ function httpPost(UR

js实现页面跳转的几种方式

第一种: <script language="javascript" type="text/javascript"> window.location.href="xx.jsp?backurl="+window.location.href; </script> 另外一种: <script language="javascript"> alert("返回"); window.