크롬 iframe 이슈 (alert, confirm)

얼마 전 시스템 개발 테스트를 하다가 우연히 크롬에서 확인창이 뜨지 않는 것을 발견했다.

일시적인 오류이겠거니 했지만, 계속 진행되지 않았고 구글링을 해보니 크롬 업데이트로 인한 이슈라고 나왔다.

 

iframe 내에서 alert와 confirm을 사용을 불허하는 내용이었다.

 

내가 운영하는 시스템은 cross domain 구조로 iframe 형태로 존재하고 있다.

 

이로 인해 크롬 이슈를 해결해야 했다.

 

반응형

 

해결 방법

 

1. alert 

 

alert 창의 경우 간단했다.

 

alert 창 대신에 window.postMessage() 메소드를 통해 메시지를 부모창에 보내는 것이다.

 

물론 부모창에서는  window.addEventListener를 통해서 해당 메소드를 받을 수 있는 구조를 갖춰야 한다.

 

부모창에서는 해당 메시지가 alert인지 여부를 판단한 후, alert이면 alert창을 띄워주면 된다.

 

2. confirm

 

confirm창의 경우는 callback 함수가 있어야 하기 때문에 간단하지는 않았다.

 

alert와 같이 postMessage를 통해 부모 창에 보내고, 부모 창에서는 마찬가지로 window.addEventListener로 받는다.

 

이후 child.contentWindow.postMessage() 를 통해 다시 iframe창에서 콜백함수를 부른다.

 

반응형

 

예)

 

customConfirm("확인 메시지", "fnCallback()");

function customConfirm () {
	parent.postMessage
    
    ...
}

function fnCallback() {
	...
}