Chrome - iframe 생성 후 file 타입의 input 박스 클릭 이벤트 호출시 문제

Chrome 에서 확인한 문제점.

 

프로세스 과정

1. 자바스크립트 함수를 호출해 document.body 에 iframe 요소를 생성한다.

2. 이어서 해당 함수 내에서 타이머 스레드를 생성한다.

3. 타이머 함수를 통해 iframe 안의 file type 의 input 박스를 검색한다.

4. 해당 개체를 발견한 경우 click 명령 이벤트를 호출한다.

5. Click 이벤트를 호출하고 나면 타이머 스레드를 clear 시킨다.

예상 결과 : 파일 업로드를 위해 대상 파일을 선택하는 다이얼로그가 뜬다.

 

프로세스 결과

- Internet Explorer 에서는 정상적으로 작동한다.

- Chrome 에서는 팝업창이 호출되지 않는다.

 

해당문제에 대해서 구글 및 네이버 검색을 해보았으나 이에 대해 명료한 답을 찾지 못했다.

오페라 외 사파리 등 기타 브라우저는 설치하지 않은 관계로 테스트하지는 않았다.

 

원인 분석 과정

1. jQuery 의 load() 함수를 이용해 load() 함수가 일어난 뒤 click 명령 전달. - 실패

- load 함수보다 전처리로 일어나는 ready() 함수는 당연히 먹히지 않는다.

- 그 외에 트리거로 이벤트를 전달해보고 했어도 먹히지 않았다.

 

2. javascript 기본 문법만을 이용해 생성 후 iframe 내부 개체에 접근해 click 명령 전달. - 실패

 

3. 각각의 처리를 완전히 독립 시켜 독자적으로 따로 실행 - 성공

- 이 경우 함수를 2개로 쪼갠뒤 다른 함수에서 순차적으로 생성과 click 호출로는 역시 먹히지 않았다.

- 아예 별도로 버튼을 "생성" 과 "클릭" 이라는 버튼으로 나누어 각각 할당 했을때에만 성공했다.

 

문제 해결

1. jQuery 의 ready() 함수를 이용 document 가 준비되었을때 보이지 않는 형태로 iframe 생성

2. 파일업로드 버튼을 클릭하면 iframe 안의 input:file 에게 클릭 명령 전달.

 

문제 분석

단일 함수 내에서 생성과 클릭 처리를 동시에 하려고하니, 문제가 된것으로 판단된다. 보통 이러한 경우 완전히 생성될 시간을 부여하기 위해 타이머(스레드)를 생성하여 처리를 하는데, 왠만한건 타이머(스레드)로 다 처리가 되는데 파일업로드를 위한 file type의 input 박스가 유독 요지부동이다. 무엇보다 타이머 이외에 "완벽한" 생성완료 시각을 얻어내는 것을 모르겠다. 또 다른 하나의 가능성으로는 크롬브라우저에서의 보안상 연계처리를 차단하고 있는 것이 아닌가 하는 부분.

 

아무튼 일시적인 방법으로 ready() 이벤트와 별도로 돌아가는 클릭 이벤트로 두 기능을 쪼개는 것으로 우회 방법을 사용해 해결은 했지만, 더 좋은 방법은 없을까 나중에 다시 기회가 되면 확인해봐야겠다. 혹은 누군가 더 좋은 방법을 찾아 공유해주면 더욱 좋을지도....