[Android] Webview에서 location.replace 사용하는법

 웹뷰에서 (모두가 그런지는 모르겠지만) location.replace가 정상적으로 작동하지 않는 이슈가 발생하였습니다.

 

여기서 잠깐, location.replace란 무엇일까요???

 

보통 anchor태그 (흔히 <a> 태그)에서 클릭 시 페이지는 location.href = '이동 주소' 형태로, history에 쌓이는 형태로 이동합니다.

 

<!-- 현재 페이지 A.html -->
<a href="B.html">B 페이지로 이동</a>

만약 다음과 같은 링크가 있다면 해당 링크 클릭 시 A.html 페이지에서 B.html 페이지로 이동합니다.

그리고, 페이지 history (흔히 우리가 브라우저에서 사용하는 앞으로가기/뒤로가기 버튼)에 A.html과 B.html이 쌓이게 됩니다.

 

history (링크 클릭 전) - A.html (현재페이지)

0
A.html

 

history (링크 클릭 후) - B.html (현재 페이지)

-1	0
A.html	B.html

다음과 같이 history에 쌓이게 됩니다.

 

그런데 만약 history가 쌓이지 않기를 바란다면 어떻게 해야 할까요?

ex.

 1. 회원 가입 완료 후 가입하던 양식을 없애버리려는 경우 (보통 페이지 만료를 하기도 함)

 2. 페이지가 한 개인 것처럼 작동시키고 싶은 경우

 

이 경우 다음과 같이 replace를 활용해주면

<!-- 현재 페이지 A.html -->
<a href="#" onclick="location.replace('B.html');return false;">B 페이지로 이동</a>

history (링크 클릭 전) - A.html (현재 페이지)

0
A.html

 

history (링크 클릭 후) - B.html (현재 페이지)

0
B.html

다음과 같이 history가 쌓이지 않게 됩니다.

 

그런데, 안드로이드의 WebView에서는 이 location.replace가 정상적으로 작동하지 않고 이전처럼 history가 쌓이는 현상이 발생하기도 하는데요. 이 경우 다음과 같이 function을 선언해주고 활용하면 됩니다.

function _replace(url){
  if(history.replaceState){
    // history의 replaceState 기능이 사용 가능한 경우
    history.replaceState(null, document.title, url);
    history.go(0);
  }else{
    // history의 replaceState 기능이 사용 가능하지 않은 경우
    location.replace(url);
  }
}

<!-- 현재 페이지 A.html -->
<a href="#" onclick="_replace('B.html');return false;">B 페이지로 이동</a>