CODEWITHSUNDEEP
jqueryajaxiframeheight
user1008545
user1008545

Reputation:

I am using iframe which is using ajax tech. and it does not resize height while on fly

I am using iframe in my website for which i am using doIframe() to resize the height it works fine when page loads but my iframe is using ajax technique. When it load some new data this function do not resize the window and content at the end of iframe do not show.

I want you to update this function (or suggest a New Function) which resize the iframe and monitor it while the frame is running.

I tried many other jquery functions but so for not working for me please help *I tried "change" event instead of "load" event but did not work out*

(function() {
    function doIframe() {
        o = document.getElementsByTagName('iframe');
        for (i = 0; i < o.length; i++) {
            if (/\bautoHeight\b/.test(o[i].className)) {
                setHeight(o[i]);
                addEvent(o[i], 'load', doIframe);
            }
        }
    }

    function setHeight(e) {
        if (e.contentDocument) {
            e.height = e.contentDocument.body.offsetHeight + 35;
        } else {
            e.height = e.contentWindow.document.body.scrollHeight;
        }
    }

    function addEvent(obj, evType, fn) {
        if (obj.addEventListener) {
            obj.addEventListener(evType, fn, false);
            return true;
        } else if (obj.attachEvent) {
            var r = obj.attachEvent("on" + evType, fn);
            return r;
        } else {
            return false;
        }
    }
    if (document.getElementById && document.createTextNode) {
        addEvent(window, 'load', doIframe);
    }
});

Upvotes: 0

Views: 736

Answers (2)

sevenkul
sevenkul

Reputation: 966

Let's say you have three pages:

  • mainPage.html which contains iframe.
  • framedPage.html which is shown in the iframe by src attribute of iframe.
  • loadMe.html which will be loaded into framedPage.html page by $.load() function.

In the loadMe.html which you load with ajax, you can write some jQuery code in head section of the page to call resizing function when document is loaded:

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        parent.setHeight();
    });
</script>

In the mainPage.html, which contains iframe, you can write a javascript function in the head of the page to resize iframe:

function setHeight(cerceveIci) {
    //find the height of the internal page
    var the_height = cerceveIci.scrollHeight;

    //change the height of the iframe
    document.getElementById("your_iframe_id").height = the_height;
}

So, when loadMe.html is loaded in framedPage.html successfully, setHeight() function of mainPage.html is called and iframe resizes.

As to how to load something into framedPage.html, you can add some jQuery function into head of framedPage.html:

function loadWithAjax() {
    $("#myDiv").load("loadMe.html");
});

and call it with a link <a onclick="loadWithAjax();">Load with Ajax.</a>.

Upvotes: 1

sevenkul
sevenkul

Reputation: 966

In the parent page, you can add an event listener to the iframe content which will listen any click in the body of content inside iframe. For example running this function once can handle this.

function boyutAyarlayici() {
    var cerceveIci = document.getElementById("your_iframe_id")
                             .contentWindow.document.body;
    setHeight(cerceveIci);
    if (cerceveIci.addEventListener) { //if not IE
        cerceveIci.addEventListener('click', function () {
            setHeight(cerceveIci);
        }, false);
    }
    else if (cerceveIci.attachEvent) { //if IE
        cerceveIci.attachEvent('onclick', function () {
            setHeight(cerceveIci);
        });
    }
}

where my setHeight function is like this:

function setHeight(cerceveIci) {
    //find the height of the internal page
    var the_height = cerceveIci.scrollHeight;

    //change the height of the iframe
    document.getElementById("your_iframe_id").height = the_height;
}

Then, if you click anything in the iframe, iframe will be resized to fit the content.

Upvotes: 1

Related Questions