[JavaScript] iframe 뒤로가기 (history back) 이슈 원인과 해결방법

 

본문에 iframe 이 들어가는 상황에서 뒤로가기가 예상했던 동작대로 작동하지 않아 알아봤는데..

stackoverflow를 포함한 다른 많은 글을 읽어보았지만 원하는 방법을 보지 못하고 어떻게 할지 여러가지 방법으로 고민하고 연구한 방법에 대해서 기술을 해본다.

테스트 크롬 버전: 94, 96

이슈

 1. iframe 내에서 자동으로 여러 페이지로 리다이렉트 되거나 사용자의 액션으로 여러페이지 이동 시 history 에 해당 페이지들이 스택으로 쌓이게 된다.

 2. 특히나 컨텐츠가 iframe 하나가 아니라 여러개를 보여줘야 할 수도 있다.

 PS.

  - 페이지 이동이 없는 단일 페이지만 iframe 내에서 보여지는 거라면 크게 문제되지 않는다.

여러가지 방법으로 테스트를 해봤을 때 다음과 같은 결론과 방법을 찾았다.

1004lucifer

뒤로가기 (Alt + ←) 는 현재로써는 완벽하게 커버 가능하지 않다.

history.back 또는 history.go 수행시 발생하는 popstate 이벤트(링크)를 통해 현재 화면에 iframe이 있는지 확인하고 iframe의 주소가 현재 사이트와 다른경우 계속해서 history.back()을 하려 했는데..

브라우저의 뒤로가기 버튼을 누르거나 뒤로가기 단축키를 이용 시 iframe 내부에서 이전페이지로 호출을 하는바람에 내가 개발하는 페이지에서 popstate 이벤트가 발생하지 않았다.
(iframe 내부에서 여러페이지 이동 없이 하나의 단일페이지만 있는경우는 문제가 없다.)

(뒤로가기 수행 시) 이벤트가 발생해야 뭐라도 처리를 할텐데 이벤트가 발생하지 않아 스크립트로 컨트롤 자체를 할수가 없었다.

사용자의 액션이 있는경우 뒤로가기 수행이 가능한다.

(하지만 F5를 눌러서 새로고침 하는경우 여전히 이슈가 있다.)

GitHub 예제소스: https://github.com/1004lucifer/Test-JavaScript/tree/master/Vanilla/TroubleShooting/history-back-page-with-iframe

데모 페이지: https://1004lucifer.github.io/Test-JavaScript/Vanilla/TroubleShooting/history-back-page-with-iframe/outerFirst.html

여기에는 두가지 단점이 있다.

 1. (스크립트를 수행하기 위해) 사용자가 특정 버튼을 누르는것과 같이 어떠한 액션이 있어야 한다.

 2. iframe이 있는 컨텐츠 모습에서 F5 와 같이 새로고침을 하게되는경우 history 스택에 쌓인 내용이 없어지지 않아 history 스택에 중복 데이터가 쌓이게 된다.

    따라서 위 스크립트를 수행 시 이전에 쌓인 history 스택 때문에 정상적으로 동작하지 않는다.

1004lucifer

위와같은 단점이 있지만..
Angular / Vue / React 와 같은 SPA 사이트에서는 그나마 사용할 수 있는 가장 나은 방법이 아닐까 싶다.