> 웹 프론트엔드 > HTML 튜토리얼 > HTML에서 자동 페이지 점프를 구현하는 5가지 방법

HTML에서 자동 페이지 점프를 구현하는 5가지 방법

不言
풀어 주다: 2018-05-07 16:18:40
원래의
3775명이 탐색했습니다.

이 글에서는 HTML의 자동 페이지 이동 방법 5가지를 주로 소개합니다. 이제는 도움이 필요한 친구들이 참고할 수 있도록 공유합니다.

이전 글에서 HTML 페이지 3을 소개했습니다. 초 후에 자동으로 점프하는 세 가지 일반적인 방법이 있습니다. 이 글에서는 계속해서 HTML 페이지 점프에 대한 관련 지식을 함께 배워보겠습니다.
자세히 설명하기 위해 아래에 5가지 예제가 나열되어 있습니다. 이 예제의 주요 기능은 5초 후에 자동으로 동일한 디렉터리에 있는 hello.html 파일로 이동합니다(필요에 따라 수정).

1) HTML 구현

코드 복사

코드는 다음과 같습니다.

<head>  
<meta http-equiv="refresh" content="5;url=hello.html">  
</head>
로그인 후 복사

장점: 단순

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

2)Javascript 구현

코드 복사

코드는 다음과 같습니다.

<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를 지원하지 않는 문제 해결 코드 코드 코드 코드는 다음과 같습니다.

위의 다섯 가지 예는 HTML의 다섯 가지 자동 페이지 이동 방법을 소개합니다.

위 내용은 HTML에서 자동 페이지 점프를 구현하는 5가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿