폼을 iframe에 서브밋하기

form 태그의 target 속성으로 폼 서브밋이 iframe에서 이루어지게 할 수 있습니다. 이 때 자주하는 실수가 있습니다.

다음 html 코드를 보면 form 태그의 target 속성으로 iframe 태그의 id 속성 값을 설정했습니다.

<form action="/do" method="post" target="view_iframe">
  ...
</form>

<iframe id="view_iframe"></iframe>

폼을 서브밋하면 크롬에서는 의도대록 동작합니다. 그렇지만 인터넷 익스플로어와 파이어폭스에서는 iframe이 아닌 새 창(또는 탭)이 열리면서 그 창에서 작업이 이루어집니다.

이런 문제가 발생하는 이유는 form 태그의 target 속성 값에 iframe 태그의 name 속성 값이 아닌 id 속성 값을 설정해서입니다.

다음과 같이 iframe 태그를 바꾸면 원하는대로 동작합니다.

<iframe name="view_iframe"></iframe>