기록

회원가입 후 환영 모달 document.referrer 본문

$

회원가입 후 환영 모달 document.referrer

mnmhbbb 2021. 11. 30. 16:00

https://developer.mozilla.org/ko/docs/Web/API/Document/referrer

 

Document.referrer - Web API | MDN

페이지로 바로 접근하였을 경우 이 값은 빈 문자열을 반환함.(링크를 통해서 온것이 아닌, 예를 들면, 북마크를 통해서 이동했을 경우). 문자열만을 반환하기 때문에,  참조 페이지(referring page)

developer.mozilla.org

전 페이지의 URI 정보를 반환하는 document.referrer API 를 사용하였다.

회원가입이 성공하고 로그인이 되면 메인 홈에서 환영합니다 모달을 띄우고 싶었다. 
그래서 회원가입이 성공하면 로그인 되게 하고, 특정 url(join.complete)로 이동시키고, '회원가입이 완료되었습니다' alert를 띄운 다음 메인 화면으로 이동시켰다.
메인 화면에서 이전 페이지 정보를 가져와서 특정 url(join.complete)가 포함되었을 경우
회원가입 환영 모달을 띄우도록 로직을 작성하였다.

// 이전 페이지 정보 감지해서 모달창 띄우기
  const referrer = document.referrer;
  joinComplete = 'join.complete';
  if(referrer.indexOf(joinComplete) != -1) {
    $('.welcome_modal').css('display', 'flex');
  }
  // 모달창 닫기
  $('.welcome_btn').on('click', function() {
    $('.welcome_modal').hide();
  })

 

Comments