'iframe' 태그의 글 목록

웹 개발시 iframe을 이용하여 form submit을 하는 경우가 종종있다.

물론 ajax를 이용하여 처리할수 있는 방법이 있으나 iframe을 사용하여 form submit시 문제가 되는 경우가 있어서 이를 위해 포스팅 해본다.

문제가 발생되는 조건은 해당 페이지에 iframe이 두개 이상 존재하며, 하나는 물론 form을 submit시키기 위한 iframe이고 다른 하나는 특정 페이지나 내용을 노출하기 위한 iframe이라고 해보자.

a.html 페이지.
<form target="frm_test">
<input type="submit" value="submit" />
</form>
<iframe src="b.html"></iframe>
<iframe name="frm_test"></iframe>

위와 같은 내용의 페이지가 있고

b.html 페이지.
<iframe name="frm_test"></iframe>

또 위와 같은 페이지가 존재한다고 할때.

예상되는 동작은 form submit시 a.html페이지의 frm_test라는 iframe으로 submit이 이뤄질거라는 예상을 하게 된다. 이는 부모 페이지에서 자식 페이지의 iframe을 참조한다는 어떠한 스크립트 내용도 없기에 그러한 예상값이 나오게 되는것인데, 실제론 a.html 페이지에서 b.html을 로드했던 iframe으로 form submit이 이뤄지게 된다.

이때 다시 b.html을 로드하는 iframe과 a.html의 frm_test iframe의 위치를 바꾸게 되면 예상했던 동작이 이뤄지게 된다.

이를 바탕으로 예상해보면 form submit시 타겟에 지정된 framename을 배열로 처리하여 부모자식에 관계없이 현재 window에 노출된 모든 iframe을 대상으로 첫번째 name을 타겟으로 잡는것같다.

iframe을 사용하여 개발을 해야할때 이러한 문제점이 있으니 name을 unique하게 정해서 중복되지 않게 한다거나, ajax를 이용하도록 하자.