iframe 사용시 주의점

iframe을 이따금씩 사용하게 되는데,
그거 뭐 별거 있어 냥 하믄되지라고 시작했다가
iframe에서 form전송 하나 하는데 낭패를 보게된적이 있었다.

아래 두가지정도만 미리 알고 시작하면
조금더 수월하게 시작할 수 있었을 듯 하다.

1. cross domain 문제

parent 와 child 사이트가 서로 다른 주소를 사용하면 정상적으로 동작하지 않는다.

www.abc.com 내에서
<iframe src="http://www.zyx.com"></iframe>

도메인주소는 같지만 서브도메인 주소가 다른 경우에도
마찬가지로 같은 문제가 발생한다.

www.abc.com 내에서
<iframe src="http://sub.abc.com"></iframe>

그래서 이럴경우에는 도메인 주소를 인위적으로 동일하게 설정을 해주어야한다.

<script>
document.domain="abc.com"
</script>

결론적으로 document.domain의 값이 일치해야만
cross domain은 해결이 되는것 같다.
기본적으로 별다른 설정이 없다면 document.domain은
서브도메인 주소까지 가지고 있다.

2. form전송

위에처럼 cross domain 문제를 해결하고,
form을 만들어
ajax가 아닌 서브밋을 할경우
리턴페이지가
현재 iframe 내부가 아닌 새창에서 호출될 수 있다.
form의 속성값중 'target'을 설정해줘서 해결을 해야 한다.

form.target = '_self'

속성값은 '_self' 외에도 몇가지 더 있으니 참조해서 사용하면 좋을듯 하다.

Value	Description
_blank	Opens in a new window
_self	Opens in the same frame as it was clicked (default)
_parent	Opens in the parent frameset
_top	Opens in the full body of the window
framename	Opens in a named frame

http://www.w3schools.com/jsref/prop_form_target.asp

3. iframe resize

 <script type="text/javascript">
  function sendSize(obj) {
        obj.style.height = "auto"; 
        contentHeight = obj.contentWindow.document.documentElement.scrollHeight;
        if(contentHeight>960)
            obj.style.height = contentHeight + 10 + "px";
        else
            obj.style.height = "960px";
     }
 </script>
<iframe onload="sendSize(this)"></iframe>