자동으로 HTML 페이지로 이동하는 5가지 방법-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

자동으로 HTML 페이지로 이동하는 5가지 방법

高洛峰

Feb 24, 2017 am 10:31 AM

자세히 설명하기 위해 아래에 5가지 예제가 나열되어 있습니다. 이 예제의 주요 기능은 5초 후에 자동으로 동일한 디렉터리에 있는 hello.html 파일로 이동합니다(필요에 따라 수정).

1) html 구현

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

장점: 단순

단점: Struts Tiles에서 사용할 수 없음

2) 자바스크립트 구현

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

장점: 유연하고, 더 많은 기능과 결합 가능

단점: 브라우저에 따라 영향을 받음

3) 상호(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>

장점: 더욱 사용자 친화적입니다

단점: firefox는 지원하지 않습니다(firefox는 span, p 등의 innerText 속성을 지원하지 않습니다.)

3) 역수(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>

4) Firefox가 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>

5) 3)과 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>

통합 다섯 가지 예는 모두를 위한 것입니다. 이 기사에서는 HTML에서 자동 페이지 이동을 구현하는 다섯 가지 방법을 소개합니다.

HTML 페이지로 자동으로 이동하는 5가지 방법에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사