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

I think you'll find this quite hard if they are not on the same domain. Not to mention this is frowned upon!! — Barrie Reader, Aug 15 '13 at 07:55
You need to use `attr('width', '1000px')` I think. But it will work only if iframe belong to the same domain. — jcubic, Aug 15 '13 at 07:55
@Neurofluxation Yes i am not able to change my app to full screen mode — Vignesh Subramanian, Aug 15 '13 at 07:57
@vignesh - if you require a more definitive answer. This isn't possible. Not without a nasty X-Domain hack — Barrie Reader, Aug 15 '13 at 07:59
@Neurofluxation oh :( I thought since its just a client side change I can do it easily :( like how we inspect element and modify the width height via browsers — Vignesh Subramanian, Aug 15 '13 at 08:01
Afraid not, here's a more fully fledged answer: http://stackoverflow.com/questions/5908676/yet-another-cross-domain-iframe-resize-qa — Barrie Reader, Aug 15 '13 at 08:03
Suddenly got two downvotes :D Downvoters please care to comment so that I can improve my question :) — Vignesh Subramanian, Dec 06 '13 at 03:53

Mr Lister · Accepted Answer · 2013-08-15T09:46:24.773

4

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>

edited Aug 15 '13 at 09:46

answered Aug 15 '13 at 08:48

Mr Lister

45,515
15
108
150

This kind of negates the whole point of the question, which is to resize the iframe. – Barrie Reader Aug 15 '13 at 09:08
2

@Neurofluxation But the question was already answered. It was "no". So the OP will have to look into other ways of achieving what they want (which is, show the app full screen). See my answer as a "Plan B", or a last ditch effort. – Mr Lister Aug 15 '13 at 09:37
I'll let you off then ;) Voted back up for explanation. Apologies!! – Barrie Reader Aug 15 '13 at 09:45

score 2 · Answer 2 · answered Aug 15 '13 at 08:17

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');
});

answered Aug 15 '13 at 08:17

jcubic

61,973
54
229
402

No I dont have the control of it !! is there anyother way to change it?? thanks and +1 for the answer – Vignesh Subramanian Aug 15 '13 at 08:26

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

2 Answers2