iframe은 DOM에 attach 할 때마다 새로 로드된다.

발생일: 2014.12.29

키워드: iframe

문제:

이번에 네이버 영어사전 크롬 확장 프로그램의 사전 로드 방식을 개편하려고 한다.

주요 업데이트 내용 중에 하나는 사전 레이어를 `<div>`에서 `<iframe>`으로 변경하는 것이다.

예전에는 페이지 내에 `<div>` 레이어를 추가하는 방식이었다.

빠르다는 장점이 있긴 한데,

페이지가 여러 프레임으로 나뉘어져 있는 경우에 간혹 제대로 동작하지 않는 경우가 있었다.

프레임 별로 컨트롤해야 해서 코드 복잡도도 더 높았다.

대신 이번 업데이트에서는 최상위 프레임에 `<iframe>`을 넣는 식으로 변경하려고 한다.

속도 차이가 좀 있긴 하지만 그보다는 사전을 모든 케이스에 보여주는 게 더 중요하다고 생각했기 때문이다.

여튼, 그래서, 사전용 `<iframe>` 엘리먼트를 생성해두고,

사전을 열고 닫을 때마다 `body`에 붙였다 떼었다 할 생각이었다.

얼랏. 근데 매번 iframe 이 새로 로드된다.

해결책:

그러고보면 지금까지 iframe을 이렇게 진지하게(?) 써본 적이 없었더 것 같다.ㅎㅎ

파일 전송 따위를 구현할 때엔 필요할 때 엘리먼트를 생성했다 삭제하거나,

이미 존재하는 iframe을 재활용 했기 때문에 지금 같은 케이스는 없었다.

여튼, iframe은 DOM에서 detach 시켰다가 다시 attach 시키면 새로 로드된다.

지금은 최초 사전을 열 때 한 번 attach 시켜놓고,

이후의 열고 닫는 액션에는 display 만 변경하는 방식으로 처리했다.