IHtml5 History API 소개
History는 전역 변수입니다. 즉, Window.history
속성과 메서드는 다음과 같습니다.
Length: 역사적 스택.
back(): 이전 페이지로 돌아갑니다.
foward(): 다음 페이지로 이동합니다.
go([delta]): delta는 숫자입니다. 0이거나 비어 있으면 이 페이지를 새로 고치세요. 양수이면 [delta] 페이지로 이동합니다. 음수이면 [델타] 페이지로 돌아갑니다.
HTML5는 다음 두 가지 메서드를 추가합니다.pushState(data, title, [,url]): 기록 스택 상단에 레코드를 삽입합니다. data는 창의 popstate 이벤트(window.onpopstate)에서 상태 매개변수로 전달되는 개체 또는 null입니다.
title은 페이지 제목입니다. 현재 모든 브라우저는 이 매개변수를 무시합니다.
url은 페이지 URL이며, 작성되지 않은 경우 현재 페이지입니다.
replaceState(data, title, [,url])
: 현재 페이지의 기록을 변경합니다. 이 변경사항은 URL에 액세스하지 않습니다. replaceState()의 URL 매개변수는 현재 페이지의 프로토콜(예: HTTP, HTTPS) 및 도메인 이름과 정확히 동일해야 합니다(다른 하위 도메인 사용은 작동하지 않음)
현재 Safari 5.0+, Chrome에만 해당 8.0+, Firefox 4.0+ 및 iOS 4.2.1+를 지원합니다. 이전 브라우저와 호환되기를 원한다면 History.js를 사용해 볼 수 있으며 일부 버그도 수정됩니다.
pushState 및 replacementState 사용: <?php
$photo = isset($_GET['id'])? $_GET['id'] : 1;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test</title>
<script type="text/javascript">
function go(c){
document.title = 'test' + c; //更改title
window.history.pushState({'title':'test'+c, 'photo':c}, 'test'+c, 'test.php?id='+c); // 插入前一页历史记录
window.history.replaceState({'title':'test'+c, 'photo':c},'test'+c, 'test.php?id='+c); // 更改当前历史记录
document.getElementById("photo").src = c + '.jpg';
}
window.onpopstate = function(obj){
if(obj.state!=null){
document.title = obj.state.title; // 后退时更新title
document.getElementById("photo").src = obj.state.photo + '.jpg';
}
}
</script>
</head>
<body>
<p>
<a href="javascript:void(0)" onclick="go(1)">page 1</a>
<a href="javascript:void(0)" onclick="go(2)">page 2</a>
<a href="javascript:void(0)" onclick="go(3)">page 3</a>
<a href="javascript:void(0)" onclick="go(4)">page 4</a>
</p>
<p><img src="<?=$photo ?>.jpg" id="photo"></p>
</body>
</html>
window.onpopstate = function(event){
alert(event.state);
}
버블링, 이분법 삽입, 퀵 정렬 알고리즘 소개
중단점 재개를 지원하는 PHP 파일 다운로드 클래스 설명
PHP 태그 속성 클래스를 통해 html을 필터링하는 방법
위 내용은 HTML5 히스토리 API 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!