CODEWITHSUNDEEP
cssiframegoogle-chrome-extension
awawjerh
awawjerh

Reputation: 214

Chrome Extension - iFrame auto-height

I have created an iFrame in my Google Chrome Extension popup and applied CSS so it has no border and height: 100%.

However, it appears with a limited height and shows a vertical scrollbar.

How do I set it to adjust to the height of the loaded HTML page?

Upvotes: 2

Views: 2239

Answers (2)

lmm333
lmm333

Reputation: 323

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 241128

This will work, source here.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript'>

    $(function(){

        var iFrames = $('iframe');

        function iResize() {

            for (var i = 0, j = iFrames.length; i < j; i++) {
              iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
            }

            if ($.browser.safari || $.browser.opera) { 

               iFrames.load(function(){
                   setTimeout(iResize, 0);
               });

               for (var i = 0, j = iFrames.length; i < j; i++) {
                    var iSource = iFrames[i].src;
                    iFrames[i].src = '';
                    iFrames[i].src = iSource;
               }

            } else {
               iFrames.load(function() { 
                   this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
               });
            }

        });

</script>

Upvotes: 1

Related Questions