[자바스크립트] Lightbox에서 뒤로가기 단추를 눌러도 화면에 머무르게 하려면

  데스크톱 환경에서는 Lightbox로 그림을 연 채로 뒤로가기 단추를 누르는 것에 신경쓸 필요가 적었지만, 스마트폰이 널리 쓰이는 요즈음의 환경에서는 그렇지 않다. Lightbox에서 빠져 나오려고 무심코 뒤로가기를 누른 행동 때문에 먼저 본 웹 페이지로 갔다가 되돌아오는 수고를 하게 될 수 있다.

  이 블로그에서도 그런 문제를 겪고 있었는데, 구글 검색 AI에 나오는 내용을 참고하여 뒤로가기 단추가 적절하지 않게 작동하는 때를 막는 부호글의 뼈대를 아래처럼 만들어 보았다.

// Lightbox가 열린 적이 있는지를 알리는 전역변수
var lightboxOpenState = 0;

// Lightbox를 시작하는(여는) 함수
function lightboxOpen() {
…
	if(!lightboxOpenState++) {
		history.pushState({ lightbox: true }, '', location.href);
		window.addEventListener('popstate', function() { lightboxEnd(); });
	}
}

// Lightbox를 마치는(닫는) 함수
function lightboxEnd() {
	if(document.getElementById('lightbox').style.display == 'none') {
		history.back();
	}
…
}

  실제 Lightbox 도구에서는 Lightbox가 닫힐 때에 부르는 함수(여기에서는 lightboxEnd)를 객체들의 이벤트로 등록해 두고 객체나 화면 여백에 딸깍하거나 ESC 글쇠들을 누른다든지 하면 실행하는 구조로 되어 있다. 

  history.pushState로 뒤로가기 단추가 작동할 기준점을 세우는데, 이 일을 한 번이 아니라 여러 번 자꾸 하면 웹 누비개의 탐색 기록이 늘어나서 뒤로가기를 하기 어려워질 수 있다. 그래서 lightboxOpen가 열릴 때마다 lightboxOpenState 변수값을 누적하여 확인하게 하였다.

  history.back은 Lightbox가 닫힌 뒤에 뒤로가기 단추가 본래 구실을 하게 해 준다.

다른 방법 시도

  위 내용은 구글 검색 AI에서 안내되는 것과 뼈대는 같아도 세부 내용이 똑같지는 않을 것이다. 구글에서 안내한 방법과 함께 조금 다른 방안들도 시도해 보았지만, 더 나은 결과를 얻지 못했다.

  Lightbox를 몇 번 열었다 닫은 뒤에 뒤로가기 단추가 잘 작동하는 데에는 lightboxOpenState 변수가 필요했다. 이 변수를 쓰지 않으면, 경우에 따라 Lightbox를 닫은 뒤에 먼저 본 웹 페이지로 돌아가려면 뒤로가기 단추를 한 번 더 눌러야 하는 문제가 생겼다. 단순히 참(true)과 거짓(false)로 값을 나누는 것만으로 마땅하지 않은 때가 있었다.

  window.addEventListener로 등록하는 이벤트가 한 번만 등록되면 더 낫지 않을까 하는 생각에서 "once: true"를 선택사항으로 넣어도 보았다.

window.addEventListener('popstate', function() { lightboxEnd(); }{ once: true });

  lightboxOpenState 변수로 경우의 수를 거르지 않는다면, 뒤로가기 단추를 한 번 누를 때에 여러 번 등록된 lightboxOpen 함수가 한꺼번에 실행될 수 있다. 'once: true'를 붙이면 같은 함수가 여러 번 등록되어 실행되는 것을 막을 수 있다. 하지만 Lightbox를 두 번 이상 열고 닫은 뒤에 뒤로가기 단추가 본래 기능(먼저 본 페이지로 가기)을 곧바로 하지 못하여 단추를 한 번 더 눌러야 하는 문제가 생겼다.

  history 기록이 지저분하게 남아서 앞으로가기 기록이 생기는 것을 막아 보려고 했지만, 자바스크립트 보안 때문에 history 기록을 넣을 수 있으나 지울 수는 없는 한계에 부딪혔다. pushState를 replaceState로 바꾸거나 history.back을 history.go로 바꾸는 방법도 조금 시도해 보았지만, 바라는 결과는 얻지 못했다.

  다른 방법을 시도하면서 크롬 계열과 파이어폭스에서의 작동 결과가 다른 경우를 만나기도 했다. 크롬 계열에서는 바라는 대로 작동하는데 파이어폭스에서 바라는 대로 되지 않은 식이었다. 객체에 이벤트가 여러 개 등록되면 각기 언제 실행되는지가 파이어폭스와 크롬 계열이 서로 다른 것 같다.