HTML页面跳转（重定向）的五种方法

最新推荐文章于 2024-05-30 18:13:13 发布
最新推荐文章于 2024-05-30 18:13:13 发布
阅读量4.2k 收藏 3
点赞数
分类专栏： HTML5 HTML 文章标签： html html5 dom
HTML5 同时被 2 个专栏收录
23 篇文章 0 订阅
订阅专栏
HTML
22 篇文章 0 订阅
订阅专栏

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

 

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

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

 

2) javascript的实现

 

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

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

 

[html]  view plain copy print ?
  1. <span id="totalSecond">5</span>  
  2. <script language="javascript" type="text/javascript">   
  3. var second = totalSecond.innerText;   
  4. setInterval("redirect()", 1000);   
  5. function redirect(){   
  6. totalSecond.innerText=--second;   
  7. if(second<0) location.href='hello.html';   
  8. }   
  9. </script>  

优点：更人性化
缺点：firefox不支持（firefox不支持span、div等的innerText属性）
3') 结合了倒数的javascript实现（firefox）

[javascript]  view plain copy print ?
  1. <script language="javascript" type="text/javascript">   
  2. var second = document.getElementById('totalSecond').textContent;   
  3. setInterval("redirect()", 1000);   
  4. function redirect()   
  5. {   
  6. document.getElementById('totalSecond').textContent = --second;   
  7. if (second < 0) location.href = 'hello.html';   
  8. }   
  9. </script>  

4) 解决Firefox不支持innerText的问题

[html]  view plain copy print ?
  1. <span id="totalSecond">5</span>  
  2. <script language="javascript" type="text/javascript">   
  3. if(navigator.appName.indexOf("Explorer") > -1){   
  4. document.getElementById('totalSecond').innerText = "my text innerText";   
  5. } else{   
  6. document.getElementById('totalSecond').textContent = "my text textContent";   
  7. }   
  8. </script>  
5) 整合3)和3')

[html]  view plain copy print ?
  1. <span id="totalSecond">5</span>  
  2.   
  3. <script language="javascript" type="text/javascript">   
  4. var second = document.getElementById('totalSecond').textContent;   
  5.   
  6. if (navigator.appName.indexOf("Explorer") > -1)  {   
  7.     second = document.getElementById('totalSecond').innerText;   
  8. } else {   
  9.     second = document.getElementById('totalSecond').textContent;   
  10. }   
  11.   
  12. setInterval("redirect()", 1000);   
  13. function redirect() {   
  14. if (second < 0) {   
  15.     location.href = 'hello.html';   
  16. } else {   
  17.     if (navigator.appName.indexOf("Explorer") > -1) {   
  18.         document.getElementById('totalSecond').innerText = second--;   
  19.     } else {   
  20.         document.getElementById('totalSecond').textContent = second--;   
  21.     }   
  22. }   
  23. }   
  24. </script>  

 

旺哥萌死了
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
页面刷新 或 重定向
m0_47106110的博客
01-31 354
id=“ + id;
HTML页面跳转的几种方式（重定向）
ts小陈的博客
06-24 1万+
HTML网址跳转，就是通过一个网址跳转到另一个网址中去，比如你需要在利用输入A网址的情况下，打开的是B网址的网站，那么A网址到B网址之间的跳转就是网址跳转。（此方法也常用于网站的404页面）...
h5、APP、微信小程序跳转外部链接的方法
最新发布
GKISX1216的博客
05-30 672
h5、APP、微信小程序跳转外部链接的方法
HTML页面跳转的5种方法
weixin_33889245的博客
03-09 370
下面列了五个例子来详细说明，这几个例子的主要功能是：在5秒后，自动跳转到同目录下的hello.html（根据自己需要自行修改）文件。 1) html的实现 <head> <!--以下方式只是刷新不跳转到其他页面--><metahttp-equiv="refresh"content="10"> <!--以下方式定...
html 重定向实现
sky0Lan的博客
11-07 904
如响应一个操作提示页面后，在指定时间后自动切换到其它显示界面。
HTML页面跳转实现方式大全
oscar999的专栏
12-17 1万+
meta>标签是HTML语言中的一个标签，用于描述HTML文档的元数据（metadata）。元数据是关于数据的数据，它提供了关于HTML文档的信息，例如文档的编码方式、作者、关键词、描述等等。标签通常包含在文档的头部标签内。下面是一些常用的：指定HTML文档的字符编码方式。常用的编码方式包括UTF-8ISO-8859-1等。：指定HTML文档的作者。
jsp下页面跳转的几种方法小结
01-20
【jsp下页面跳转的几种方法】 在Java服务器页面（JSP）开发中，页面跳转是常见的操作，用于在用户交互或业务处理后引导用户访问新的页面。主要有三种方式来实现这一目标：RequestDispatcher.forward()、...
JSP页面的五种跳转方法
07-16
- JavaScript提供了`window.location.href`或`window.location.replace()`等方法来实现页面跳转，但这种方式依赖于客户端的JavaScript支持。 5. **隐藏的`<form>`提交** - 创建一个隐藏的表单并使用JavaScript来...
一个超炫酷的跳转页面 HTML
09-01
综上所述，这个"超炫酷的跳转页面 HTML"项目涉及到HTML的基本结构和链接功能，JavaScript的动态效果和页面跳转控制，以及CSS的样式设计和动画效果。通过这些技术的组合，可以创建出吸引用户并有效引导他们到目标页面...
密码访问单页自定义跳转页面HTML源码
01-22
这可能是整个项目的主HTML文件，包含了HTML结构以及嵌入的JavaScript代码，用于实现密码验证和页面跳转功能。这个文件可能是这样的： ```html <!DOCTYPE html> <html lang="zh"> 密码访问单页 请输入密码: ...
html-redirect:生成 HTML 重定向页面
06-18
html 重定向 生成 HTML 重定向页面。 例子 htmlRedirect ( 'http://example.com' ) . pipe ( fs . createWriteStream ( 'example1.html' ) ) ; 示例1.html： <!DOCTYPE html > < html > < head > < title > (redirect) </ title > < meta http-equiv =" refresh " content =" 1;url=http://example.com/ " > < script > window . location . replace ( "http://example.com/" ) ; </ script > </ head > < body > < a hre
html常用的几个重定向连接示例代码
09-28
重定向想必大家都知道吧，尤其是在页面跳转是发挥着及其重要的作用，下面整理了几个不错的html常用重定向连接，需要的朋友可以参考下
java servlet 几种页面跳转的方法
09-05
本文将详细介绍两种主要的页面跳转方法：`redirect`和`forward`。 1) **Redirect 方式** `response.sendRedirect()`方法用于实现重定向。当调用这个方法时，服务器向客户端发送一个HTTP 302状态码，指示浏览器去...
分享HTML页面跳转的5种方法
hdxx2022的博客
02-19 1万+
下面列了五个例子来详细说明，这几个例子的主要功能是：在5秒后，自动跳转到同目录下的hello.html（根据自己需要自行修改）文件。缺点：firefox不支持（firefox不支持span、div等的innerText属性）3") 结合了倒数的javascript实现（firefox）-- 以下方式只是刷新不跳转到其他页面 -->3) 结合了倒数的javascript实现（IE）-- 以下方式定时转到其他页面 -->优点：灵活，可以结合更多的其他功能。缺点：受到不同浏览器的影响。5) 整合3)和3")
HTML 立即重定向跳转代码
慈凯的技术博客
05-06 500
<html> <meta http-equiv="refresh" content="0;url=https://blog.csdn.net/jlcikai"> </html>
HTML网站页面跳转，重定向分析，腾讯云国际
tencentcloud_的博客
11-03 196
HTML网址跳转就是从一个网址链接跳转到另一个网址中去，比如你需要打开A网址时，打开的是B网址的网站，那么A网址到B网址之间的跳转就是网址跳转。在网站使用以及维护中，301重定向页面跳转是我们常用的一个功能，例如页面需要重新定向，或者打开一个域名链接跳转到另一个页面链接，则可以使用域名定向的功能！这个可以直接在宝塔面板，网站里设置301重定向，不过这个方法主要是针对网站与网站，因为是域名对域名或者目录对域名，如果是动态网址，则无法实现详细的链接！表示打开此页面后5秒跳转到www.zbck123.com。
从HTML页面重定向
asdfgh0077的博客
12-29 1988
是否可以设置基本HTML页面以在加载时重定向到另一个页面？
html meta标签 refresh 实现HTML自动刷新页面和跳转（重定向)
热门推荐
逸尘的专栏
10-23 4万+
refresh 属性值 – 刷新与跳转(重定向)页面 refresh用于刷新与跳转(重定向)页面 refresh出现在http-equiv属性中，使用content属性表示刷新或跳转的开始时间与跳转的网址 3秒后刷新页面:3秒之后跳转页面:
django 调用html页面跳转页面跳转页面,Django重定向到当前页面
05-25
如果你想在 Django 中调用 HTML 页面并在页面中执行某些操作，可以通过在视图函数中使用 render 函数来实现。例如，你可以在视图函数中创建一个变量来存储 HTML 页面中的数据，并将其传递给 render 函数，这样 Django 就可以将该变量渲染到 HTML 页面中，并将结果返回给浏览器。 如果你想在 HTML 页面中跳转到另一个页面，可以使用 HTML 标签 `<a>` 或者 JavaScript 实现跳转。如果你想在 Django 视图函数中实现页面跳转，可以使用 HttpResponseRedirect 或者 redirect 函数。 下面是一个使用 HttpResponseRedirect 实现页面跳转的例子： ```python from django.http import HttpResponseRedirect def my_view(request): # 执行一些操作... # 跳转到另一个页面 return HttpResponseRedirect('/some/url/') ``` 如果你想在重定向时保留当前页面的查询参数，可以使用 reverse 函数来生成重定向 URL。例如： ```python from django.urls import reverse from django.http import HttpResponseRedirect def my_view(request): # 执行一些操作... # 生成重定向 URL url = reverse('myapp:viewname', args=[arg1, arg2]) # 跳转到另一个页面 return HttpResponseRedirect(url) ``` 在这个例子中，`reverse` 函数生成一个名为 `viewname` 的 URL，其中包含两个参数 `arg1` 和 `arg2`。然后，`HttpResponseRedirect` 函数使用生成的 URL 进行重定向。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值