Question

I need to resize cross domain iframe to fit content . So in parent.html I write this:

$(function () {
    $('iframe').load(function () {
        var h = null;
        if (!h) {
            if (location.hash.match(/^#h(\d+)/)) {
                h = RegExp.$1;
                $(this).css({
                    'height': h + 'px'
                })
                location.hash = ''
            }

        }
    })
})

and in child.html i write this:

$(function () {
    h = 0
    h = $(document).height()
    console.log(h)
    if (top != self) {
        top.location.replace("http://parentdomain.com/#h" + h);
    }
})

it works fine when it loads once, but if I click link in iframe and content changes variable h still has first value. If I open child.html in new window var h will be changing, but not in iframe.

Is it possible to fix?

Answer 1

The resize action actually doesn’t get called again.

If you click a link in the iFrame you should call a function on the parent, or watch the haschange event which is only supported on the more recent browsers.