CODEWITHSUNDEEP
javascriptjquerycssiframe
Milind Anantwar
Milind Anantwar

Reputation: 82251

change iframe height according to content

iframe tag:

  <iframe scrolling="no" style="height: 956px; width: 100%" frameborder="0" id="ampcontentiframe"></iframe>

i am trying to resize iframe height on content load.i tried other solutions from:

Link1

Link2

Link3

But none of them solved my problem.i tried calling resize function on window load as well as iframe load.but the height it sets every time is different(sometimes actual content height and sometimes original height of iframe).

Any help guys.....??

FYI:I also tried by removing scrolling attr from iframe.but it didn't work

Upvotes: 0

Views: 6023

Answers (3)

GautamD31
GautamD31

Reputation: 28753

You can try with the following script.

<script type="text/javascript">
  function iframeLoaded() {
    var iFrameID = document.getElementById('your_frame_id');
    if(iFrameID) {            
        iFrameID.height = "";
        iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
   }   
}
</script>

and add onload function to your iframe like

<iframe onload="iframeLoaded()">

Upvotes: 3

David Bradshaw
David Bradshaw

Reputation: 13087

This is one of those problems that really is harder than it should be. Here are the things you need to consider, in order to keep an iFrame sized correctly.

Working out an accurate height

Getting an accurate height for the iFrame is not as simple as it should be, as you have a choice of six different properties that you can check and none of them give a constantly right answer. The best solution I've come up with is this function that works so long as you don't use CSS to overflow the body tag.

function getIFrameHeight(){
    function getComputedBodyStyle(prop) {
        return parseInt(
            document.defaultView.getComputedStyle(document.body, null),
            10
        );
    }

    return document.body.offsetHeight +
        getComputedBodyStyle('marginTop') +
        getComputedBodyStyle('marginBottom');
}

This is the IE9 version, for the much long IE8 version see this answer.

If you do overflow the body and you can't fix your code to stop this, then using either the offsetHeight or scrollHeight properties of document.documentElement are your best options. Both have pros and cons and it best just to test both and see which works for you.

PostMessage

The postMessage API provides a simple method for comunicating between an iFrame and it's parent.

To send a message to the parent page you call it as follows.

parent.postMessage('Hello parent','http://origin-domain.com');

In the other direction we can send the message to the iFrame with the following code.

var iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage('Hello my child', 'http://remote-domain.com:8080');

To recevie a message create an event listerner for the message event.

function receiveMessage(event)
{
  if (event.origin !== "http://remote-domain.com:8080")
    return;

  console.log(event.data);
}

if ('addEventListener' in window){
    window.addEventListener('message', receiveMessage, false);
} else if ('attachEvent' in window){ //IE
    window.attachEvent('onmessage', receiveMessage);

These examples uses the origin property to limit where the message is sent to and to check where it came from. It is possible to specify * to allow sending to any domain and you may in some cases you may want to accept messages from any domain. However, if you do this you need to consider the security implications and implement your own checks on the incoming message to ensure it contains what your expecting. In this case the iframe can post it's height to '*', as we might have more than one parent domain. However, it's a good idea to check incoming messages are from the iFrame.

function isMessageFromIFrame(event,iframe){
    var
        origin  = event.origin,
        src     = iframe.src;

    if ((''+origin !== 'null') && (origin !== src.substr(0,origin.length))) {
        throw new Error(
            'Unexpect message received from: ' + origin +
            ' for ' + iframe.id + '. Message was: ' + event.data  
        );
    }

    return true;
}

MutationObserver

The other advance in more modern broswers is MutationObserver which allows you to watch for changes in the DOM; so it is now possible to detect changes that could effect the size of the iFrame without having to constantly poll with setInterval.

function createMutationObserver(){
    var
        target = document.querySelector('body'),

        config = {
            attributes            : true,
            attributeOldValue     : false,
            characterData         : true,
            characterDataOldValue : false,
            childList             : true,
            subtree               : true
        },

        observer = new MutationObserver(function(mutations) {
            parent.postMessage('[iframeResize]'+document.body.offsetHeight,'*');
        });

    log('Setup MutationObserver');
    observer.observe(target, config);
}

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

if (MutationObserver){
    createMutationObserver();
}

Other issues

Other things to consider include, having more than one iFrame on the page, CSS :Checkbox and :Hover events causing page resize, avoiding the use of height auto in the iFrames' body and html tags and lastly the window being resized.

IFrame Resizer Library

I've wrapped all this up in a simple dependancy free library, that also provides some extra functions not discussed here.

https://github.com/davidjbradshaw/iframe-resizer

This works with IE8+.

Upvotes: 5

GautamD31
GautamD31

Reputation: 28753

Try with this if you want to scroll bar for iframe

<iframe style="height: 956px;overflow-y:scroll; width: 100%" frameborder="0" id="ampcontentiframe"></iframe>

just put "min-height" and add "overflow-y" prop as scroll it will work

or if you dont want to scroll then try like

<iframe scrolling="no" style="min-height: 956px; width: 100%" frameborder="0" id="ampcontentiframe"></iframe>

Upvotes: 1

Related Questions