집 > 기사 > 웹 프론트엔드 > 자동으로 HTML 페이지로 이동하는 5가지 방법

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

高洛峰원래의: 2017-02-24 10:31:521940검색

자세히 설명하기 위해 아래에 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 중국어 웹사이트를 주목하세요!

성명：

이전 기사：HTML 초보자를 위한 15가지 모범 사례다음 기사：HTML 초보자를 위한 15가지 모범 사례