전단 경로 -- History
10703 단어 자바 script
이전 글 을 보지 못 한 어린 이 는 우리 의 역사 글 을 되 돌아 볼 수 있 습 니 다 ~ ~
우선 이 history 가 뭔 지 얘 기해 볼 까요?
js 의 history 대상
window.history
window 대상 의 역사 기록 1.window.history.back(),
2.window.history.forward(),
3.window.history.go(num),
history.pushState()
방법 은 브 라 우 저 역사 에 상 태 를 추가 했다. pushState() : 、 ( ) URL
history.pushState(state, title, url);
window.history.replaceState()
현재 history 실 체 를 수정 합 니 다. history.replaceState pushState , replaceState()
popstate
사건, history 실체 가 바 뀌 었 을 때 발생 하 는 사건.window.history.state
, history 실체의 state 대상 을 획득 합 니 다.위 에서 소개 한
pushState
과 replaceState
는 HTML 5 의 새로운 인터페이스 입 니 다. 그들의 역할 이 매우 큽 니 다. 인터넷 주 소 를 바 꿀 수 있 지만 페이지 를 새로 고 칠 필요 가 없습니다. 아래 에 자세히 알 아 보 겠 습 니 다 ~상세히 이해 하 다
pushState
세 개의 인 자 를 받 아들 이 고 순서대로:
state: 지정 한 사이트 와 관련 된 상태 대상 입 니 다. popstate 이벤트 가 실 행 될 때 이 대상 은 반전 함수 로 전 송 됩 니 다.이 대상 이 필요 하지 않 으 면 null 을 채 울 수 있 습 니 다.
title: 새 페이지 의 제목 이지 만 모든 브 라 우 저 는 현재 이 값 을 무시 하고 있 기 때문에 null 을 작성 할 수 있 습 니 다.
url: 새로운 사이트 주 소 는 현재 페이지 와 같은 도 메 인 에 있어 야 합 니 다.브 라 우 저의 주소 표시 줄 에 이 주 소 를 표시 합 니 다.
가장 많이 사용 되 는 방법:
window.history.pushState(null,null,'download?id=1');
전체 사용: var oState= {title: ' ' };window.history.pushState(oState, ' ', 'download?id=1');
replaceState
push State 원리 와 같이 사용 해도 마찬가지 입 니 다.
가장 많이 사용 되 는 방법:
window.history.replaceState(null,null,'download?id=1');
전체 사용: var oState= {title: ' ' };window.history.replaceState(oState, ' ', 'download?id=1');
밤 이 왔어요 ~
<title>Line Game - 5title>
<p>You are at coordinate <span id="coord">5span> on the line.p>
<p>
<a href="?x=6" onclick="go(1); return false;">Advance to 6a> or
<a href="?x=4" onclick="go(-1); return false;">retreat to 4a>?
p>
<script>
var currentPage = 5; // prefilled by server!!!!
function go(d) {
setupPage(currentPage + d);
history.pushState(currentPage, document.title, '?x=' + currentPage);
}
onpopstate = function(event) {
setupPage(event.state);
}
function setupPage(page) {
currentPage = page;
document.title = 'Line Game - ' + currentPage;
document.getElementById('coord').textContent = currentPage;
document.links[0].href = '?x=' + (currentPage+1);
document.links[0].textContent = 'Advance to ' + (currentPage+1);
document.links[1].href = '?x=' + (currentPage-1);
document.links[1].textContent = 'retreat to ' + (currentPage-1);
}
script>
이것 은 다른 사람 이 쓴 밤 입 니 다. 우 리 는 Advance to 를 클릭 합 니까?대응 하 는 url 과 모드 는 모두 + 1, 반대로 retreat to 를 클릭 합 니까?도 - 1, 이것 은 url 과 모드 보기 가 동시에 변화 하 는 수 요 를 만족 시 킵 니 다 (후 우 • *).
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.