HTML页面跳转的5种方法 - michael_lee - 博客园

HTML页面跳转的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`>

分类: HTML/CSS,JAVASCRIPT

好文要顶;) 关注我;) 收藏该文;) ; "分享至新浪微博") ; "分享至微信")

michael_lee
关注 - 0
粉丝 - 22

+加关注;)

14

0

« 上一篇：总结一下各类语言的SUBSTR
» 下一篇：文字与input(单选框+复选框+输入框)垂直居中

posted @ 2010-11-24 17:25 michael_lee 阅读(655045) 评论(0)  编辑 收藏

Original url: Access
Created at: 2018-11-13 16:46:42
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论