[HTML] 5 ways to jump to Html pages-HTML Tutorial-php.cn

[HTML] 5 ways to jump to Html pages

高洛峰

Release： 2017-02-16 14:44:45

Original

2652 people have browsed it

Directory structure:

contents structure [-]

html implementation
Javascript implementation
Combined reciprocal javascript implementation (IE)
Solve the problem that Firefox does not support innerText
Combined the reciprocal javascript implementation (IE, Firefox)
Reference article

Five examples are listed below to explain in detail. The main functions of these examples are: after 5 seconds, automatically jump Go to the hello.html file in the same directory (modify it according to your needs).
1) Implementation of html

<head>
<!-- 以下方式只是刷新不跳转到其他页面 -->
<meta http-equiv="refresh" content="10">
<!-- 以下方式定时转到其他页面 -->
<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

<script language="javascript" type="text/javascript"> 
// 以下方式直接跳转window.location.href=&#39;hello.html&#39;;// 以下方式定时跳转setTimeout("javascript:location.href=&#39;hello.html&#39;", 5000); 
</script>

Copy after login

Advantages: Flexible, can be combined with more other functions
Disadvantages: Affected by different browsers

3) Combined Reciprocal javascript implementation (IE)

<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript"> 
 second ="redirect()", 1000=--(second<0) location.href=&#39;hello.html&#39;</script>

Copy after login

Advantages: more user-friendly
Disadvantages: not supported by firefox (firefox The innerText attributes of span, p, etc. are not supported)

3') Combined with the javascript implementation of the reciprocal (firefox)

<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;hello.html&#39;; 
} 
</script>

Copy after login

4) Solve the problem that Firefox does not support innerText

<span id="totalSecond">5</span><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"; 
} 
</script>

Copy after login

5) Combined with reciprocal javascript implementation (IE, Firefox)

<span id="totalSecond">5</span>
 <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;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--; 
    } 
} 
} 
</script>

Copy after login

For more [HTML] 5 ways to jump to Html pages and related articles, please pay attention to the PHP Chinese website!