«
»

Full screen takeover of parent from iframe with javascript

December 16th, 2011

If you have an iframe with external content (aka poor mans integration) you might need to modify the size of the iframe dynamically. Security limitations on javascript can make this a little bit troublesome.

Here is a small how-to if you need to take over the screen from a link inside an iframe, as long as you’re using the same domain name on both the parent and the iframe page. The script below requires jQuery, but should be easy to rewrite if you use any other javascript framework.

Parent page:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8

    document.domain = "yourdomainhere.com"; // Only necessary if the subdomain differs from the iframe
    resizeFramesetFull = function() {
        $("#myiframe").css("position", "absolute");
        $("#myiframe").css("top", "0px");
    }
    resetFrameset = function() {
        $("#myiframe").css("position", "relative");
    }
?View Code HTML
1

<iframe id="myiframe" name="myiframe" width="100%" marginwidth="0" marginheight="0" frameborder="0"></iframe>

IFrame page:

?View Code JAVASCRIPT
1
2
3

    document.domain = "yourdomainhere.com"; // Only necessary if the subdomain differs from the parent
    resizeFramesetFull = function() { if (typeof parent.resizeFramesetFull == 'function') parent.resizeFramesetFull();
    resetFrameset = function() { if (typeof parent.resetFrameset == 'function') parent.resetFrameset(); }
?View Code HTML
1
2

<a href="javascript:void(0)" onclick="resizeFramesetFull()">FULL SCREEN</a><br />
<a href="javascript:void(0)" onclick="resetFrameset()">RESET IFRAME SIZE</a>

This entry was posted on Friday, December 16th, 2011 and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply