Fünf Möglichkeiten, einen automatischen Seitensprung in HTML zu implementieren-HTML-Tutorial-php.cn

Fünf Möglichkeiten, einen automatischen Seitensprung in HTML zu implementieren

不言

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

Original

3751 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die fünf Methoden des automatischen Seitensprungs in HTML vor. Jetzt kann ich ihn mit Ihnen teilen.

Im vorherigen Artikel haben wir stellte drei gängige Methoden zum automatischen Springen einer HTML-Seite nach 3 Sekunden vor. In diesem Artikel werden Ihnen weiterhin relevante Kenntnisse über HTML-Seitensprünge vermittelt.
Im Folgenden sind fünf Beispiele aufgeführt, um dies im Detail zu erläutern. Die Hauptfunktion dieser Beispiele besteht darin, nach 5 Sekunden automatisch zur Datei hello.html im selben Verzeichnis zu springen (diese entsprechend Ihren eigenen Anforderungen zu ändern).

1) Implementierung von HTML

Code kopieren

Der Code lautet wie folgt:

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

Nach dem Login kopieren

Vorteile: Einfach

Nachteile: Kann nicht in Struts Tiles verwendet werden

2) Implementierung von Javascript

Code kopieren

Der Code lautet wie folgt:

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

Nach dem Login kopieren

Vorteile: Flexibel, mit weiteren anderen Funktionen kombinierbar

Nachteile: Betroffen von verschiedene Browser

3) Kombinierte Javascript-Implementierung von Reciprocal (IE)

Code kopieren

Der Code lautet wie folgt:

<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>

Nach dem Login kopieren

Vorteile: benutzerfreundlicher

Nachteile: Firefox unterstützt nicht (Firefox unterstützt nicht die innerText-Attribute von span, p usw.)

3) JavaScript, das die reziproke Implementierung (Firefox) kombiniert

Code kopieren

Der Code ist wie folgt folgt:

<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>

Nach dem Login kopieren

4) Firefox löst das Problem, dass innerText nicht unterstützt wird

Code kopieren

Der Code lautet wie folgt:

<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>

Nach dem Login kopieren

5) Integration 3) und 3')

Code kopieren

Der Code lautet wie folgt:

<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>

Nach dem Login kopieren

Das Obige zeigt fünf Beispiele. Dies ist eine Einführung in fünf Möglichkeiten, den automatischen Seitensprung in HTML zu implementieren. Ich hoffe, es gefällt Ihnen.

Das obige ist der detaillierte Inhalt vonFünf Möglichkeiten, einen automatischen Seitensprung in HTML zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!