Web Designer in Hastings

Coding: iframes


Redirecting iframe Child pages to appear within their Parent

The Scenario:

Your web page (parent page) pulls in content from multiple sub pages (child pages) via an iframe. This works well if the browser always opens the parent page first. However, should the child pages be found via a search engine or directly typed in the browser address bar, then only the child page will display.

The common solution is to set up a referer back to the parent page. So if the child doesn't appear within a frame then load the parent page.

The problem with this is the parent frame will always be loaded with it's default child frame. Should you have just one child frame per parent page that would work fine, but usually there is one parent frame that houses many child pages.

Our Solution:

In order to always load a child page within it's correct parent page you need to pass the url of the child page back to the parent page so it knows to display that instead of it's default (hard coded) child page.

The following code was developed to seamlessly put a child frame back in it's correct parent page even when directly opened from a search engine or entered in the browser address bar.

This script block should go in the head content area of the child pages:

<script type="text/javascript">
    if ( self === top ) {
        var url = window.location;
        window.location="http://www.yourdomain.com/index.php?iframe="+url;
    }
</script>

and put this script block in the parent page to call the iframe

<?php
    $iframe_url = (isset($_GET['iframe']) && !empty($_GET['iframe'])) ? $_GET['iframe'] : "initial-url-content";
?>

<iframe src="<?=$iframe_url?>"></iframe>

Redirect iframe to parent