기존에 아래와 같은 문제로 포스팅을 한 적이 있었다.
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 값을 지정해야 구분 가능)
댓글
댓글 쓰기