Home >Web Front-end >HTML Tutorial >Five ways to implement automatic page jump in HTML

Five ways to implement automatic page jump in HTML

不言Original: 2018-05-07 16:18:403817browse

This article mainly introduces the five methods of automatic page jump in HTML. It has certain reference value. Now I share it with you. Friends in need can refer to it.

In the previous article We have introduced three common methods of automatically jumping an HTML page after 3 seconds. This article will continue to introduce you to relevant knowledge about HTML page jumps. Let’s learn together.
Five examples are listed below to explain in detail. The main function of these examples is: after 5 seconds, automatically jump to the hello.html file in the same directory (modify it according to your own needs).

1) HTML implementation

Copy code

The code is as follows:

<head>  
<meta http-equiv="refresh" content="5;url=hello.html">  
</head>

Advantages: Simple

Disadvantages: Cannot be used in Struts Tiles

2) Implementation of javascript

Copy code

The code is as follows:

<mce:script language="javascript" type="text/javascript"><!--  
setTimeout("javascript:location.href=&#39;http://liting6680.blog.163.com/blog/hello.html&#39;", 5000);  
// --></mce:script>

Advantages: Flexible, can be combined with more other functions

Disadvantages: Affected by different browsers

3) Combined javascript implementation of reciprocal (IE)

Copy code

The code is as follows:

<span id="totalSecond">5</span>  
<mce:script language="javascript" type="text/javascript"><!--  
var second = totalSecond.innerText;  
setInterval("redirect()", 1000);  
function redirect(){  
totalSecond.innerText=--second;  
if(second<0) location.href=&#39;http://liting6680.blog.163.com/blog/hello.html&#39;;  
}  
// --></mce:script>

Advantages: more user-friendly

Disadvantages: firefox does not support (firefox does not support the innerText attributes of span, p, etc.)

3) JavaScript that combines the countdown Implementation (firefox)

Copy code

The code is as follows:

<mce:script language="javascript" type="text/javascript"><!--  
var second = document.getElementById(&#39;totalSecond&#39;).textContent;  
setInterval("redirect()", 1000);  
function redirect()  
{  
document.getElementById(&#39;totalSecond&#39;).textContent = --second;  
if (second < 0) location.href=&#39;http://liting6680.blog.163.com/blog/hello.html&#39;;  
}  
// --></mce:script>

4) Solve Firefox The problem of not supporting innerText

Copy code

The code is as follows:

<span id="totalSecond">5</span>  
<mce:script language="javascript" type="text/javascript"><!--  
if(navigator.appName.indexOf("Explorer") > -1){  
document.getElementById(&#39;totalSecond&#39;).innerText = "my text innerText";  
} else{  
document.getElementById(&#39;totalSecond&#39;).textContent = "my text textContent";  
}  
// --></mce:script>

5) Integration 3) and 3')

Copy code

The code is as follows:

<span id="totalSecond">5</span>  
<mce:script language="javascript" type="text/javascript"><!--  
var second = document.getElementById(&#39;totalSecond&#39;).textContent;  
if (navigator.appName.indexOf("Explorer") > -1)  
{  
second = document.getElementById(&#39;totalSecond&#39;).innerText;  
} else  
{  
second = document.getElementById(&#39;totalSecond&#39;).textContent;  
}  
setInterval("redirect()", 1000);  
function redirect()  
{  
if (second < 0)  
{  
location.href=&#39;http://liting6680.blog.163.com/blog/hello.html&#39;;  
} else  
{  
if (navigator.appName.indexOf("Explorer") > -1)  
{  
document.getElementById(&#39;totalSecond&#39;).innerText = second--;  
} else  
{  
document.getElementById(&#39;totalSecond&#39;).textContent = second--;  
}  
}  
}  
// --></mce:script>

The above is through five examples This is an introduction to five ways to implement automatic page jump in HTML. I hope you like it.

The above is the detailed content of Five ways to implement automatic page jump in HTML. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：The Chinese garbled problem of html files and the display problem in the browserNext article：The Chinese garbled problem of html files and the display problem in the browser

See more

Five ways to implement automatic page jump in HTML

Related articles