HTML5 문서: 페이지 점프를 달성하는 5가지 방법(코드 공유)-HTML 튜토리얼-php.cn

HTML5 문서: 페이지 점프를 달성하는 5가지 방법(코드 공유)

奋力向前

풀어 주다： 2021-08-16 15:37:28

앞으로

7778명이 탐색했습니다.

이전 글 "CSS를 사용하여 HTML 글꼴에 배경 이미지를 추가하는 방법을 가르쳐주세요"에서는 CSS를 사용하여 HTML 글꼴에 배경 이미지를 추가하는 방법을 소개했습니다. 다음 기사에서는 HTML5를 사용하여 페이지 이동을 수행하는 방법을 소개합니다. 이는 특정 참조 가치가 있으므로 도움이 필요한 친구가 될 수 있기를 바랍니다.

HTML5 문서: 페이지 점프를 달성하는 5가지 방법(코드 공유)

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

1. html

<head>
<!-- 以下方式只是刷新不跳转到其他页面 -->
<meta http-equiv="refresh" content="10">
<!-- 以下方式定时转到其他页面 -->
<meta http-equiv="refresh" content="5;url=hello.html"> 
</head>

로그인 후 복사

구현 장점: 단순
단점: Struts Tiles에서 사용할 수 없음

2. javascript 구현

<script language="javascript" type="text/javascript"> 
// 以下方式直接跳转
window.location.href=&#39;hello.html&#39;;
// 以下方式定时跳转
setTimeout("javascript:location.href=&#39;hello.html&#39;", 5000); 
</script>

로그인 후 복사

장점: 유연하며 더 많은 기능과 결합 가능
단점 : 다양한 브라우저에 영향을 받음

3. 상호 자바스크립트 구현(IE)과 결합

<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript"> 
var second = totalSecond.innerText; 
setInterval("redirect()", 1000); 
function redirect(){ 
totalSecond.innerText=--second; 
if(second<0) location.href=&#39;hello.html&#39;; 
} 
</script>

로그인 후 복사

장점: 더욱 사용자 친화적임
단점: Firefox는 지원하지 않음(firefox는 span, p 등의 innerText 속성을 지원하지 않음) )

4. 상호(firefox)

<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;hello.html&#39;; 
} 
</script>

로그인 후 복사

5의 자바스크립트 구현과 결합. Firefox가 innerText

<span id="totalSecond">5</span>
<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"; 
} 
</script>

로그인 후 복사

를 지원하지 않는 문제를 해결합니다. 3과 4가 포함된 전체 코드

<span id="totalSecond">5</span>

<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;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--; 
	} 
} 
} 
</script>

로그인 후 복사

권장 학습: Html 비디오 튜토리얼

위 내용은 HTML5 문서: 페이지 점프를 달성하는 5가지 방법(코드 공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!