2019. 7. 11. 10:55ㆍlanguage/jquery
ajax를 활용해서 비동기로 페이지 이동 시 뒤로가기를 구현해 보고자 한다.
먼저 비동기로 페이지 이동하는 방법에 대해서는 다음 링크를 참고한다.
javascript history 추가
javascript 에서 history 를 추가하는 방법입니다. 앞서 history 삭제하는 방법은 링크를 참고하세요. history 삭제 javascript history 삭제 / href replace 비교 javascript history 삭제하기 는 불가능하다. 구..
cofs.tistory.com
위 포스팅에서 작성한 화면을 깜빡이지 않고 전환하는 방법에서 일부 소스를 추가했다.
html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<html>
<body>
<div id="gnb"></div>
<div id="lnb"></div>
<div id="bodyContents"></div>
<input type="button" value="페이지 이동" onclick="acyncMovePage('/test/test.do')">
</body>
</html>
<script>
function acyncMovePage(url){
// ajax option
var ajaxOption = {
url : url,
async : true,
type : "POST",
dataType : "html",
cache : false
};
$.ajax(ajaxOption).done(function(data){
// url history 등록
history.pushState(null, null, url + "?" + params);
// Contents 영역 삭제
$('#bodyContents').children().remove();
// Contents 영역 교체
$('#bodyContents').html(data);
});
}
$(window).on('popstate', function(event) {
window.location = document.location.href;
});
</script>
|
cs |
27# : history.pushState() 함수를 활용해서 이동한 페이지 주소를 history 에 추가한다.
36# : window.popstate 이벤트가 발생할 때 페이지 전환을 한다.
history.pushState() 함수는 다음 포스팅을 참고한다.
javascript history 추가
javascript 에서 history 를 추가하는 방법입니다. 앞서 history 삭제하는 방법은 링크를 참고하세요. history 삭제 javascript history 삭제 / href replace 비교 javascript history 삭제하기 는 불가능하다. 구..
cofs.tistory.com
여기서 중요한 것은 window.popstate 이벤트 이다.
history.puthState() 함수나 history.replaceState() 함수에 의해서 history 엔트리가 생성(추가) 되면 popstate 이벤트의 state 속성은 history 엔트리의 state 객체의 복사본을 가지게 되는데 이 때 document의 두개의 history 엔트리에서 변화가 일어날 때 window.popstate 이벤트가 발생한다.
필자는 위 내용을 브라우저의 뒤로가기 버튼이나 history.back() 호출 시 이동할 history 가 history.puthState() 함수로 추가한 history일 경우에 window.popstate 이벤트가 발생한다고 이해했다.
popstate이벤트 내부에서 뒤로가기를 비동기로 구현할 수 도 있다.
필자는 이를 비동기로 구현했다가 스크립트 문제가 발생해서 사용하지 않았다.
끝 ~
'language > jquery' 카테고리의 다른 글
| jquery ajax 옵션 총정리 (0) | 2019.07.19 |
|---|---|
| jquery ajax 화면 동적 전환, 깜빡임 없이 페이지 이동 (0) | 2019.07.11 |
| jquery FormData를 Json으로 변환 (0) | 2019.07.11 |
| jquery load 화면 동적 전환, 깜빡임 없이 페이지 이동 (0) | 2019.07.03 |
| jquery modal 새로고침, 동적 호출, 멀티 호출 (0) | 2018.10.23 |
| jquery 드래그 앤 드롭 파일 업로드 (28) | 2018.04.25 |
| onbeforeunload 를 활용하여 페이지 이동 시 프로그레스바, 로딩바 생성 (0) | 2017.06.02 |
| browser.msie 정의되지 않음 또는 null 참조인 'msie' 속성을 가져올 수 없습니다. (0) | 2016.12.15 |
| jquery javascript 문바열 바이트 체크 / 영문 한글 특수문자 등 / length / maxlength (0) | 2016.12.06 |
| page swiper plugin 추천 / 페이지 슬라이드 / 이미지 슬라이드 / 탭 슬라이드 / jquery mobile 호환 (0) | 2016.07.08 |