Translate

[HTML] iframe 페이지 안에서 자신의 iframe 크기(width, height)를 알 수 있는 방법 (id 값 없이..)





기존에 아래와 같은 문제로 포스팅을 한 적이 있었다.


Android 2.x 의 문제를 해결하기 위해 부모객체에서 iframe의 id 로 찾아서
iframe 내부의 페이지에서 window.innerHeight 를 맞춰줬는데

크로스도메인 이슈를 활용하여 ID 값이 없어도 자신이 속한 iframe의 height 를 얻어낼 수 있는 방법을 찾았다.



outer.html

<html>
    <head></head>
    <body>
        <iframe src="http://[_DOMAIN_]/inner.html" style="border:0"></iframe><br/>
        <iframe src="http://m.nate.com" style="border:0"></iframe>
    </body>
</html>



inner.html

<html>
    <head></head>
    <body>
        <script>
            // Android 2.x 의 경우 자신을 감싸고있는 iframe 크기에 맞게 내부사이즈를 조절한다.
            if (navigator.userAgent.match(/Android 2/)) {
                var thisIframeHeight = 0;
                for (var i = 0; i < parent.frames.length; i++) {
                    try {
                        thisIframeHeight = parent.frames[i].innerHeight;
                    } catch (e) {}
                }
                if (thisIframeHeight != 0) {
                    window.innerHeight = thisIframeHeight + 'px';
                }
            }
        </script>
    </body>
</html>




장점
1. 자신이 만든 페이지가 다른 서비스의 iframe 에 들어갈 시 Android 2.x 에 대응하여 height 값을 조절할 수 있다.
2. iframe을 넣어줄 때 ID 값을 주지 않아도 iframe 내부의 페이지에서 자신의 크기(width, height) 를 가져올 수 있다.


단점
1. inner.html 페이지가 outer.html 페이지의 여러군데 iframe 으로 포함되어 있는경우
    어떤 iframe 이 자신의 iframe인지 구분할 수 없다. (id 값을 지정해야 구분 가능)






댓글