[JavaScript] document.referrer 이전 페이지에 대한 정보 (로그인 후 돌아가기)

document.referrer

: 링크를 통해 현재 페이지로 이동 시킨 이전 페이지의 URI 정보를 반환한다.
페이지로 바로 접근하였을 경우는 빈 문자열을 반환한다. (링크를 통해서 온 것이 아닌, 예를 들면 북마크를 통해서 이동했을 경우)

문자열만을 반환하기 때문에,  참조 페이지(referring page)에 대한 DOM  액세스가 제공되지 않는다.

 

페이지가 로드되었을 때 콘솔을 찍어보면 어디서 유입되었는지 알 수 있다.

//RecipeWrite 페이지의 스크립트
$(document).ready(function() {
	console.log(document.referrer);
    //생략

 

RecipeList 페이지에서 글쓰기 버튼을 통해 RecipeWrite 페이지로 넘어왔더니 콘솔에 주소가 그대로 찍힌다.

완전 유용하고 신기함!!

 

 

 

로그인을 안 했을 때 글쓰기 버튼을 누르면 로그인 페이지로 가서 로그인을 하는데

로그인 성공하면 메인으로 가도록 해두었기 때문에

다른 페이지에서 로그인을 해도 무조건 메인으로 가는 것이 불편하다 생각했다.

 

구글링으로 document.referrer을 발견해서 else if로 조건 추가해주었다. (login.jsp)

+ history.back 으로 보냈더니 로그인 안 된 것처럼 화면이 그대로라서 location.href 로 이전 화면 주소로 새로 보내줬다.

$(".login_btn").on("click", function() {
	if($.trim($("#id").val()) == "") {
		$("#error_id").show();
	} else if($.trim($("#pw").val()) == "") {
		$("#error_pw").show();
	} else {
		var params = $("#actionForm").serialize();
		$.ajax({
			url : "LoginAjax", 
			type : "POST", 
			dataType : "json", 
			data : params, 
			success : function(res) {// 성공했을때 경과를 res에 받고 함수 실행
				//document.referrer : 이전 페이지에 대한 정보
				if(res.msg == "success" && document.referrer == -1) {
					location.href = "Main"
				} else if(res.msg == "success" && document.referrer !== -1) {
					//다른 페이지에서 로그인하면 그 페이지로 돌아가기
					//history.back(); //이건 로그인 안 된 상태로 돌아가진다
					location.href = document.referrer;
				} else {
					$("#error").show();
				}
			},
			error : function(request, status, error) { // 실패했을때 함수 실행
				console.log(request.responseText); // 실패 상세내역
			}
		});
	}
});

해결!

 

 

참고 : https://mesonia.tistory.com/131

참고 : https://steady-snail.tistory.com/123