Five ways to automatically jump to HTML pages-HTML Tutorial-php.cn

Five ways to automatically jump to HTML pages

高洛峰

Release： 2017-02-24 10:31:52

Original

2027 people have browsed it

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) Implementation of html

<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

<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 with the reciprocal javascript implementation (IE)

<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) Combined javascript implementation of the reciprocal (firefox)

<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 the problem that Firefox does not support innerText

<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) Integrate 3) and 3')

<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 five examples are for everyone This article introduces five ways to implement automatic page jump in HTML. I hope you like it.

For more related articles on the five methods of automatic jump of HTML pages, please pay attention to the PHP Chinese website!