is it possible to Change the width/height of an iframe from within

Question

I am going to host my app in a site. The app will be shown inside an iframe in it. i need my app to be on full screen, is there anyway where I can change the size of that iframe which will hold my app from my application?? My app and the site hosting it are not the same domain.

$("iframe", window.parent.document).css("width", "1000px");

this is not working as the site and app do not belong to same domain

Answer 1

The sanest way, if your app needs to run full screen, is to break out of the iframe. That is, detect if your page is in an iframe, and if so, redirect the browser to your page so that is is no longer in the iframe!

This page explains how to do it:

<script type="text/javascript">
    if (top.location!= self.location) {
        top.location = self.location.href;
    }
</script>

Answer 2

If you control both pages then you can use HTML5 Post message:

outside:

$(window).bind("message", function(e) {
    $('iframe').attr({
        width: e.originalEvent.data.width,
        height: e.originalEvent.data.height
    });
});

inside:

$('button').click(function() {
    parent.postMessage({width: '200px', height: '200px'}, 'http://localhost');
});