[자바스크립트] 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 });

  하지만 이렇게 해 보는 것이 Lightbox가 열려 있는 때와 닫힌 뒤에 뒤로가기 단추가 일관성 있고 알맞게 작동하는 것에 도움이 되지는 않았다.

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

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