Five ways to implement automatic page jump in HTML-HTML Tutorial-php.cn

Five ways to implement automatic page jump in HTML

不言

Release： 2018-05-07 16:18:40

Original

3814 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!