HTML实现页面自动跳转的五种方法-html tutorial-php.cn

Rumah

hujung hadapan web

html tutorial

HTML实现页面自动跳转的五种方法

May 07, 2018 pm 04:18 PM

html automatik

这篇文章主要介绍了关于HTML实现页面自动跳转的五种方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

在上篇文章给大家介绍了HTML页面3秒后自动跳转的三种常见方法，本文继续给大家介绍有关html页面跳转相关知识，一起学习吧。
下面列了五个例子来详细说明，这几个例子的主要功能是：在5秒后，自动跳转到同目录下的hello.html（根据自己需要自行修改）文件。

1）html的实现

复制代码

代码如下:

&lt;head&gt;  
&lt;meta http-equiv=&quot;refresh&quot; content=&quot;5;url=hello.html&quot;&gt;  
&lt;/head&gt;

Salin selepas log masuk

优点：简单

缺点：Struts Tiles中无法使用

2）javascript的实现

复制代码

代码如下:

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

Salin selepas log masuk

优点：灵活，可以结合更多的其他功能

缺点：受到不同浏览器的影响

3）结合了倒数的javascript实现（IE）

复制代码

代码如下:

&lt;span id=&quot;totalSecond&quot;&gt;5&lt;/span&gt;  
&lt;mce:script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;&lt;!--  
var second = totalSecond.innerText;  
setInterval(&quot;redirect()&quot;, 1000);  
function redirect(){  
totalSecond.innerText=--second;  
if(second&lt;0) location.href=&#39;http://liting6680.blog.163.com/blog/hello.html&#39;;  
}  
// --&gt;&lt;/mce:script&gt;

Salin selepas log masuk

优点：更人性化

缺点：firefox不支持（firefox不支持span、p等的innerText属性）

3 ）结合了倒数的javascript实现（firefox）

复制代码

代码如下:

&lt;mce:script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;&lt;!--  
var second = document.getElementById(&#39;totalSecond&#39;).textContent;  
setInterval(&quot;redirect()&quot;, 1000);  
function redirect()  
{  
document.getElementById(&#39;totalSecond&#39;).textContent = --second;  
if (second &lt; 0) location.href=&#39;http://liting6680.blog.163.com/blog/hello.html&#39;;  
}  
// --&gt;&lt;/mce:script&gt;

Salin selepas log masuk

4）解决Firefox不支持innerText的问题

复制代码

代码如下:

&lt;span id=&quot;totalSecond&quot;&gt;5&lt;/span&gt;  
&lt;mce:script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;&lt;!--  
if(navigator.appName.indexOf(&quot;Explorer&quot;) &gt; -1){  
document.getElementById(&#39;totalSecond&#39;).innerText = &quot;my text innerText&quot;;  
} else{  
document.getElementById(&#39;totalSecond&#39;).textContent = &quot;my text textContent&quot;;  
}  
// --&gt;&lt;/mce:script&gt;

Salin selepas log masuk

5）整合3）和3'）

复制代码

代码如下:

&lt;span id=&quot;totalSecond&quot;&gt;5&lt;/span&gt;  
&lt;mce:script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;&lt;!--  
var second = document.getElementById(&#39;totalSecond&#39;).textContent;  
if (navigator.appName.indexOf(&quot;Explorer&quot;) &gt; -1)  
{  
second = document.getElementById(&#39;totalSecond&#39;).innerText;  
} else  
{  
second = document.getElementById(&#39;totalSecond&#39;).textContent;  
}  
setInterval(&quot;redirect()&quot;, 1000);  
function redirect()  
{  
if (second &lt; 0)  
{  
location.href=&#39;http://liting6680.blog.163.com/blog/hello.html&#39;;  
} else  
{  
if (navigator.appName.indexOf(&quot;Explorer&quot;) &gt; -1)  
{  
document.getElementById(&#39;totalSecond&#39;).innerText = second--;  
} else  
{  
document.getElementById(&#39;totalSecond&#39;).textContent = second--;  
}  
}  
}  
// --&gt;&lt;/mce:script&gt;

Salin selepas log masuk

以上通过五个实例是给大家介绍了HTML实现页面自动跳转的五种方法，希望大家喜欢。

Atas ialah kandungan terperinci HTML实现页面自动跳转的五种方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn