1. 2013.05.13 iframe에 form의 target을 이용한 submit시 문제점.
  2. 2013.05.13 tistory syntax highlight

iframe에 form의 target을 이용한 submit시 문제점.

웹 개발시 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를 이용하도록 하자.

'WebDevelop' 카테고리의 다른 글

svn merge  (0) 2013.04.17
전세계 IP 대역 CSV 파일  (0) 2007.11.20
우편번호 한글+영어(2007년 1월 8일)  (0) 2007.10.12

tistory syntax highlight

tistory에 code highlight 적용 하는 방법.


먼저 해당 사이트에서 syntaxhighlighter를 다운 받는다.

(http://alexgorbatchev.com/SyntaxHighlighter/)


혹은 현재 최신 버전을 다운로드 받는다.

syntaxhighlighter_3.0.83.zip


그리고 압축을 풀어서 scripts, styles 폴더를 모두 업로드 한다.

이후 몇가지 셋팅을 해줘야 하는데.


skin.html 파일에 업로드한 scripts의 파일들중 사용하려는 js파일과 기본 core파일을 로드해줘야한다.

<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shAutoloader.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

또한 코드 노출시 사용하고 싶은 스타일을 따로 적용할수 있는데 styles에 포함된 파일들중 하나를 선택해서 로드하면 된다.

<link type="text/css" href="./images/shCore.css" rel="stylesheet" />
<link type="text/css" href="./images/shThemeDefault.css" rel="stylesheet" />

'컴퓨터 팁' 카테고리의 다른 글

코드 하이라이팅 사용법  (0) 2008.10.28
Excel 최대 행,열 수  (0) 2007.12.06
리눅스 파일 리스트 뽑아 내는 명령어  (0) 2007.11.13
Return top