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

Home

Web Front-end

HTML Tutorial

[HTML] 5 ways to jump to Html pages

高洛峰

Feb 16, 2017 pm 02:44 PM

html

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!

Statement of this Website

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