页面跳转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>
时间： 2024-12-11 22:42:32

页面跳转5中方法的相关文章

js实现页面跳转重定向多种方法

分享下js实现页面跳转重定向的几种方式. 第一种: <script language="javascript"type="text/javascript"> window.location.href="http://www.jbxue.com"; </script> 第二种: <script language="javascript"> alert("返回"); wind

js 页面跳转 5种方法

js 控制页面跳转的5种方法.原文地址:http://www.jbxue.com/article/11815.html 第一种: <script language="javascript" type="text/javascript"> window.location.href="login.jsp?backurl="+window.location.href; </script> 第二种: <script lang

JavaWeb中页面跳转的实现方法汇总

HTML环境 1.<a>标签 2.<form action>标签 JSP环境 1.Response.sendRedirect()(重定向) 执行第二次请求,redirect的目标页面不会保存原请求地址的请求参数和request数据,URL也会变成redirect中的地址. 2.Request.getRequsetDispatcher("URL").forward(request,response); 仍然是上一次的请求,会保留保存原请求地址的请求参数和reque

小程序-页面跳转传值的方法

比如从index.wxml跳转到aaa.wxml index.wml页面 <navigator url = "../aaa/aaa?id=1" ></navidator>  //传到aaa.wxml的时候传过去的值为id=1,则需要在aaa.wxml 的js获取到id=1 aaa.js页面 Page({  data: {      id:''   },  onLoad: function (options){     var that = this;     t

Vue + ElementUi 页面跳转传值的方法

跳转的页面(接收):      跳转的页面(接收): 原文地址:https://www.cnblogs.com/panyw/p/8175781.html

推荐几种PHP实现页面跳转的方法

1.PHP实现页面跳转第一种方法 <?php header("Location:http://www.baidu.com"); ?> header()是php内置函数,用于实现页面跳转. 2.PHP实现页面跳转第二种方法:利用 jsecho " < script language="javascript">"; echo "location.href='www.abidu.com'"; echo &qu

iOS-UITableView-处理cell上按钮事件(弹出警示框,页面跳转等)

一. 目的: 实现UITableViewCell上按钮点击事件可以进行页面跳转. 二. 实现方法: 1. 用协议的方式的实现. 2. 需要自定义UITableViewCell. 三. 代码部分. cell.h中 #import <UIKit/UIKit.h> @protocol SevenProtocolDelegate <NSObject> - (void)sevenProrocolMethod:(UIViewController *)viewController and:(NS

ASP.NET页面跳转

总结一下跳转方式: <a>标签 <a href=”home.aspx”></a> HyperLink控件 Asp.net 服务器端控件 属性NavigateUrl指定要跳转到的Url地址,NavigateUrl是可以在服务器端使用代码修改,这个区别于<a>,由于HyperLink本身没有事件所以要在服务器端其它事件中设置NavigateUrl. <Asp:HyperLink id=”hyperlink” runat=”server” Navigatoe

ASP.NET页面跳转及传值方式

ASP.NET页面跳转相关知识 一.<a>标签 1. <a href=”test.aspx”></a> 2. 这是最常见的一种转向方法; 二.HyperLink控件 1. Asp.net 服务器端控件 属性NavigateUrl指定要跳转到的Url地址 2. NavigateUrl是可以在服务器端使用代码修改,这个区别于<a> 3. 由于HyperLink本身没有事件所以要在服务器端其它事件中设置NavigateUrl 4. 代码示例: <Asp:Hy