Javascript - iframe의 history back(뒤로가기)에 대한 문제 및 해결방법

iframe을 사용할 경우 페이지 내의 iframe은 보통 다른 페이지 인데 이 페이지가 window.history에 기록되어 신경쓰이는 일이 발생하게 되는데, 코드를 짜는데 번거롭게 할 뿐이다.

 

보통 이런경우가 발생하게 되면 아래의 케이스와 같은 현상이 일어납니다.

 

부모창(ifame 열기 전)

window.history = 1

 

부모창(ifame 오픈 후)

window.history = 1

 

부모창(ifame 닫은 후)

window.history = 2

 

즉, 페이지를 이동하지 않았지만 페이지 history상에는 iframe페이지도 history에 추가된다.

 

그리고 history상에는 iframe이 history로 기록되어 뒤로가기 할 경우 ifame페이지를 인식하게 된다.

 

브라우저 상에는 Back/Forward Cache가 저장되어있어서 뒤로가기 하면 javascript의 소스가 실행되게 되는데

 

이때 ifame페이지의 스크립트가 다음소스와 같은 상황이면 뒤로가기(Alt + ←) 했을 때 iframe페이지의 상태가 if조건을 만족하는 상황이였다면, iframe페이지의 스크립트때문에 "Fail" alert가 계속 발생하게 된다.

 

iframe 페이지의 script 소스

$(document).ready(function(){
    if (.....) {
    	alert("Fail");
        return;
    }
    
    if (....){
    	..
    }
    
    .
    .
    .    
});

 

 

이런 상황을 방지하기 위해서는 iframe부모 태그에서 iframe사용할 때는 iframe태그를 새로 만들어주고, iframe을 닫을 때는 iframe태그를 삭제해주는 것이 iframe history에 의한 script실행의 번거로움을 방지할 수 있다.

 

iframe의 src를 빈값으로 처리하여 iframe페이지를 없애면 되지않을까 생각할 수도 있다. 하지만 이미 history상에 페이지가 저장되어 있기에 history에 저장된 열렸던 iframe페이지와 스크립트를 불러오게 되므로 iframe태그를 지웠다가 다시 생성하는 것이 iframe정보를 완전히 없앴다가 새로 생성하게 되므로 iframe의 history에 대한 문제를 방지할 수 있다.