[Android] Android 2.x 에서 iframe 엘리먼트의 Scroll, Height 속성이 적용되지 않는 문제

날짜:





iframe 으로 다른 컨텐츠를 로딩 후 Android 에서 확인해보니
레이아웃이 잘못나오거나 동작을 하지 않는 문제가 발생했다.


이슈 사항은 다음과 같다.


* iframe Element

Android 2.x
  - height 속성이 적용되지 않는다.
  - 위의 문제로 인해 scroll 을 적용할 수 없다.




해결 방법은??

iframe 내에 들어가는 컨텐츠의 height를 iframe 에 적용하고 싶은 height 로 잡아준 후
내부에서 스크롤을 잡아준다.


outer.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="divWrapper" style="width:100%; height:500px;">
        <div id="divHeader" style="width:100%; height:100px;"></div>
        <div id="divContent" style="width:100%; height:300px;">
            <iframe id="iframeContent" style="width:100%; height:100%;" src="inner.html"></iframe>
        </div>
        <div id="divFooter" style="width:100%; height:100px;"></div>
    </div>
</body>
</html>





inner.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var iframeWrapper = parent.document.getElementById('divContent');
            iframeWrapper = $(iframeWrapper);

            $('html').css({
                'height' : iframeWrapper.css('height')
            });
            $('body').css({
                'height' : iframeWrapper.css('height')
            });
        });
    </script>
</head>
<body>
    <div id="innerContent">
        Content
    </div>
</body>
</html>




PS.
inner.html 에 들어가는 div 또한 scroll 이 되지 않으므로 해당 페이지에서 scroll 처리가 필요하다.
http://1004lucifer.blogspot.kr/2014/06/android-android-2x-div-element-scroll.html




PS.
ID 값을 가지지 않고도 inner.html 페이지에서 자신의 iframe 의 height 값을 가져올 수 있다.
방법은 아래의 링크
http://1004lucifer.blogspot.kr/2014/07/html-iframe-iframe-width-height-id.html




댓글

댓글 쓰기